Next to the Styles pane,

the Computed pane displays exactly how the browser is computing your styles.

In other words, it lets you see the final set of CSS properties the browser is

applying to the selected element.

As you learned earlier, CSS properties can be applied to an element from

different rule sets, even rules defined in the browser's default style sheet.

Now some properties, as you know,

get inherited from ancestor elements while others get overwritten.

So the Computed pane gathers all the properties the browser's actually

using to style the element into an alphabetical list of properties.

And it comes in handy when you notice that an element has many

overwritten styles, right?

So instead of searching through the styles pane to determine

which properties are being applied, you click over to the Computed pane and

it will show you exactly what the browser sees.

So for example, selecting the header shows a list of all the background properties

the browser is applying to the header.

Clicking the arrow to the right of a property takes you

back to its original source in the styles tab.

Now before applying a length value, like an rem or

percentage to an element, the browser computes it to a pixel value.

So in the Computed pane,

you're able to see computed pixel values applied to elements.

For instance, the header's padding values are set using units,

but we can see here that the computed values are 16 pixels for

the bottom left and right sides and 40 pixels for the top.

One of the most important areas of the Computed pane is the box panel diagram at

the top.

Each element takes up a certain amount of space on a page and

the CSS box model is what determines the amount of space each element takes up.

So the diagram here shows you a representation of an element's box model

and how much space it's occupying.

It lets you quickly examine and edit the content, padding, border, and

margin areas of an element.

So here, we see that the headers content area is 868 by 224 pixels.

The browser also highlights the selected box model area in blue and

the padding area is 40 pixels for the top and 16 pixels for

the bottom left and right sides.

This area is highlighted in green.

All values in the box model diagram are editable, just click on them.

For instance, I'll select the input element then click inside

the height value in the content area.

I'll press the up arrow key to increase the height of the content area and

the down key to decrease it.

So being able to see exactly how much space an element is taking up

on the page is going to help you debug layout issues faster.

For example, somewhere in my CSS I could have

a troublesome rule like li last-child, margin 0.

And when I go back and add guests to the list, I notice that the guest

item on the far right doesn't quite align with the other items.

Well I can select the item and examine its box bottom parameters.

And this shows me that the item does not have a margin area even though it should,

and I see all the margin values in the list of computed styles set to zero.

Clicking over to the Styles pane shows me that the li last-child rule is

in fact overriding the margin value set for guest in this media query.

And turning this margin 0 property off fixes the problem.

Now I can simply go to my CSS, online 13, delete the rule, and that resolves it.