TOOLS - CSS: Professional Techniques for Modern Layout - page 8

You can also have Firebug's Style tab show you the computed styles for the element (Figure
1-6), which means it will show you the values that the browser has applied for every CSS
property it knows, whether anyone said anything about them or not. Remember, all CSS
properties have default values; here you can see them all. h is view can be useful when you
want to know, for example, exactly how many pixels of line-height the browser is
applying to a heading.
10
Figure 1-6: Computed styles.
You can also get a look at the exact dimensions and sizes of an element's box model compo-
nents, like height, width, padding, margins, and so on (see Figure 1-7). h ese are shown in
pixels. Even cooler: When you hover over the box shown in this panel, pixel rulers appear in
the page itself, placed along the top and let edges of the element's outer border edge.
h ere's tons more: As evident in Figure 1-8, you can edit element attribute values (like
class ) or the element content itself, add or edit CSS properties and values, and much more.
Explore the interface by clicking or right-clicking just about anything in the Firebug interface
to see what you can do.