Every element in your webpage is a box: once you understand that, the process of laying out a CSS design becomes much more intuitive. The syntax for box markup is a straight inheritance from the earliest days of HTML, where the element names were used for table and then frame mark up. There are five parameters for each element: box width, box height, border, margin, and padding.
The diagram below shows you how these parameters relate to one another:
The diagram below shows you how these parameters relate to one another:
Figure 1: The Parameters of a Box Element
If you use a development environment like Firebug then you can inspect the box parameters visually, which lets you understand how the values are interacting:
Figure 2: Firebug's Box Model Layout Viewer
Note that in this tutorial we’ll talk about the box – the content container – and the element, which is the area enclosed by the border. The size of the element is calculated as follows: Element width= box width + left padding + right padding + left border + right border Element height = box height + top padding + bottom padding + top border + bottom border
Absolute vs Relative Positioning of Text Boxes: If you give your box an absolute position and don’t set a width, then the box width will be exactly as wide as it needs to be to hold the content. So if the box contains just one word, then the box is only as wide as that word. As the text grows, the box grows. The box will grow width-wise until it reaches the width of the parent element and then begin to wrap. The effect of this can be unpredictable as different browsers render text differently and the eventual size of the element will vary.
If your box has a relative or static position then the box behaves a little differently. In fact it behaves in two different ways depending on whether you set a width implicitly or explicitly.
If the box has no declared width it will default to 100% of the available space, but the padding will grow inwards. Say, for example, the parent element width is 450px, the border width is 0px and the padding value is 10px, then the width of the content box will only be 430px.
However, if you explicitly declare the width of the box to be 100% then the content box will be 450px wide. Padding will be added to the outside, and as a result the width of the element will be 470px in total (plus borders)
You may require the text box to be explicitly 100% of the parent element, yet you might want to have padding as well. Because the padding will be added to the “outside” of the element it will be too large to fit. Values can be hard coded in fixed-width environments, but in environments where there parent elements can be resized it’s impossible to do this elegantly. Some compromise needs to be found between defining the size of the content box and allowing for padding – your design will dictate what you do.
Doodling in the Margins: The margin isn’t part of the element, but it is the amount of space that is reserved between the element and other page elements. In order to get elements to line up on the page it is essential that you understand how margins work. Margins are always transparent and so their presence can only be deduced from the effect that they have on other page elements. To add to the complexity, the top, right, bottom, and left margin can be changed independently using separate properties. A visual layout browser like the one in Firebug can help you to understand where the margins extend to.
Margins can be made negative, essentially cancelling the white space between two elements. For example, if two elements are side-by-side and the left element has a right hand margin of 20px and the right element has a left hand margin of -20px the margin will be cancelled out and the elements will abut.
If two adjacent elements are of a similar type then only the larger of the two margins will be applied: that is if one text box with a bottom margin of 20px is above another text box with a top margin of 15px, the whitespace between them will be 20px, not 35px. This is true for all types of elements except headers and list items, whose margins are never overridden.
If you want to see the effect of the box elements on your page in the browser, simply add the following to your stylesheet:
* {border: 1px solid green !important; }
For a variety of css box layouts, try thenoodleincident’s set of boilerplate stylesheets.