Further, more detailed discussion about element boxes is available in the file devoted to padding, borders and margins.
Inline element box control is in another file.
CSS assumes every element generates one (or more) rectangular boxes called element boxes. Each element box has a content area at its core, the content area is surrounded by optional amounts of padding, borders, and margins. This is illustrated below.
This is the content core of the paragraph. The outer line shows the margin of the element. The red border shows the edge of the padding space, padding is set to 25px on all sides. Margins are the space between the red border and the edge of the element box, they are set to 15px on all sides. |
This article discusses first the horizontal formatting for element boxes and then the vertical formatting.
There are seven possible properties horizontal formatting of the element box: margin-left, border-left, padding-left, width, padding-right, border-right, margin-right. Width and margins can be set to auto or to a specific value, the other four cannot be set to auto and default to zero. The total of all seven must add up to the width of the parent element. This is often body, but it may be something else, since block elements almost always have parents. It is possible for all seven properties to be set to specific values which do not add up to the width of the parent element. If that happens, the element box is said to be over-constrained. In this situation, the value of margin-right is automatically changed to auto. (In languages that read from right to left, margin-left is changed to auto.)
margin-left:100px; margin-right: 100px; width: 100px; |
The difference between Figure 2 and Figure 3 is the change from width=100px to width=auto.
margin-left:100px; margin-right: 100px; width: auto; |
In Figure 4 both width and margin-left are set to auto.
margin-left:auto; margin-right: 100px; width: auto; |
In Figure 5 margin-right and margin-left and width are set to auto. The two margins collapse to zero and the width of the content area is maximized.
margin-left:auto; margin-right: auto; width: auto; |
Remember the rule is that the total of all seven horizontal values must equal the width of the parent element. Negative left and right margins mean the child can have a wider element box than the parent. In the example below, there is a paragraph, the child) inside a div, the parent. The black border belongs to the div, the blue to the paragraph. Values for the horizontal properties of the paragraph are indicated. The div has a width of 400px. See how the text starts to the left of the left side of the element box, and to the left of the left side of the browser window.
margin-left: -50px; width:auto; margin-right:10px;
Percent can be used instead of (or as well as) other absolute and relative length units for the seven attributes for horizontal formatting of the element box. Mixing percentages and other length units can easily generate an over-constrained element box. That will force the margin-right into auto and may cause some display or design problems.
Note: Border widths cannot be expressed as percentages.
Just like width, the height of an element is determined by content. And there can be some interaction between them as can be seen in Figures 1 and 2. There are also seven possible attributes to set which can control the height of an element box: margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom. Only htree can be set to auto: margin-top, margin-bottom, height. These should sound quite familiar if you read through and understood the previous section about horizontal element formatting. Like horizontal formatting, padding and borders default to zero. Interestingly, if margin-top or margin-bottom are set to auto they also default to zero.
The use of percents with height should remind you of the use of percents with width. The first example shows a paragraph with height set to 50% inside a div where the height is 6em. The second also has a paragraph with height set to 50%. This time the height of its parent div is set to auto.
The use of percents with height should remind you of the use of percents with width. The first example shows a paragraph with height set to 50% inside a div where the height is 6em.
The use of percents with height should remind you of the use of percents with width. The second also has a paragraph with height set to 50%. This time the height of its parent div is set to auto.
You can see from the borders how much space each div and each paragraph occupy in the browser window. I added a little padding to show the different borders more clearly.
Just to keep things interesting, vertically adjacent margins (not padding and not borders) will be collapsed. For example, if we set the following style
li {margin-top:15px; margin-bottom:15px;}
we would expect the spacing between each list itemt to be 30px: 15px for the bottom of the previous item and 15px for the top of the current item. What actually happens is the spacing between list items using this style will be 15px. You can get around this "feature" using borders and padding.
This is probably easier to illustrate than talk about, and the result is more or less what you would expect. Each pair of paragraphs is separated by two line breaks.
This is an ordinary paragraph followed by another ordinary paragraph.
This is an ordinary paragraph preceded by another ordinary paragraph.
This is another ordinary paragraph followed by a paragraph with a negative top margin (-30px).
This is a paragraph with a negative top margin (-30px) preceded by another ordinary paragraph.
This is a paragraph with a negative bottom margin (-30px) followed by another ordinary paragraph.
This is another ordinary paragraph preceded by a paragraph with a negative bottom margin (-30px).
List items have a few special rules of their own. Many are discussed on a page devoted to lists. A few are discussed here.
Both ordered and unordered lists have indicators or markers which are controlled by the browser and which are not part of the item's contents. The placement of these markers is currently beyond the control of page designers. Designers can have a little control using the attribute list-style-position, which controls whether the marker will be inside or outside the list's element box.
Further, more detailed discussion about element boxes is available in the file devoted to padding, borders and margins.
Inline element box control is in another file.