Firebug and CSS Layout

When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, padding, and sizes for you.

Box model shading

With CSS, every element is made up of nested boxes known as the margin, border, padding, and content. As you move your mouse over an HTML element in any of Firebug's tabs, you'll see the element's boxes shaded in different colors right inside the page. There's no quicker way to visualize the difference between margins and padding, for example.

Measure each edge

Firebug's Layout tab gives you a visual breakdown of each box in the box model and the width of each each edge. Additionally, it shows you the width and height of the innermost box, and the x and y offset of the element relative to its parent.

Rulers and guides

Don't be shy, move your mouse around the boxes in the Layout tab. As you do, rulers and guides will appear in the page.
The rulers surround the current element's offset parent, which is the element that its left, top, bottom, and right CSS properties are relative to. The guides are tangent to each edge of the element and are a great way to show pixel-perfectionists just how close they are to making the edges of multiple boxes align.

Move it, will ya?

Just like every other tab in Firebug, the Layout tab can be edited. Click on any number in the view and a little editor will appear. Just like in the CSS editor, you can use the up and down arrow keys to change the number by one, or the page up and down keys to change it by ten.






Quote from : FIREBUG