As established on the previous page, every HTML element produces a box of some dimension on a web page. It is important, however, to make a distinction between the overall element box dimensions and the dimensions of each element's visible box area. This distinction is important since it may not be completely intuitive when styling elements.
We also need to be aware that there are differences between the width property we set for an element and the actual space needed if it is to fit properly inside a containing block with a set width of its own.
The width Property
The width property sets the width of an element's content area ONLY.
If you specify width:300px, this means that the content of a paragraph or heading will be exactly 300 pixels wide when viewed in a modern, standards-compliant browser. However, if padding or borders are added to that paragraph, then the visible portion of its box may be larger than the 300px-wide content portion of the box. The width property does not take into account these additional items - borders or padding - that may or may not surround the content.
When you look at a web page object, such as a paragraph, the parts of the element box that you can actually see are the content area, the padding, and the borders. Let's examine these aspects of the "visible" portion of a box.
The Visible Portion of a Box
Of course the visible portion of a box includes top and bottom padding and borders but the importance of this discussion focuses on the horizontal dimensions of a box which include:
- the width of the content area - as set by the
widthproperty - any optional padding values - for left and right padding
- the size of any optional borders - on the left and right sides
We must remember to include padding and border dimensions in addition to the box's content width in order to know the total space occupied by the visible box.
Suppose we style a DIV box with the following style definition:
#example1 {
width: 600px;
border: 1px solid black;
background-color: #DDD;
}
We see the following rendered for the DIV element associated with the ID named "example1".
- The content area is exactly 600 pixels wide.
- There is no padding assigned - the text is up against the border.
- The border is 1 pixel in width.
In this scenario, the horizontal dimension of the visible portion of the box works out to be:
600 pixels (content width) + 2 pixels (left/right borders) = 602 pixels
The visible box is now 602 pixels wide because the size of the (visible) borders has been added on to the content width which is still exactly 600 pixels. The total size is important to know, especially if this 602px-wide visible box must fit inside a containing block where the content width is only 600px! Something will have to give.
Padding Adds Size to the "Visible Box"
Padding also adds to the size of the visible portion of the box and must be taken into account. In this example we will add 20 pixels of padding to the DIV we styled above:
#example2 {
width: 600px;
border: 1px solid black;
background-color: #DDD;
padding: 20px;
}
Our example now looks like this:
- The content area is still 600 pixels wide - as specified by the
widthproperty. - The 1px-wide border on the left and right adds 2 pixels to the total width
- The 20px-wide padding on the left and right adds 40 pixels to the total width
The horizontal dimension of the visible portion of the box now works out to be:
600 pixels (content) + 2 pixels (borders) + 40 pixels (padding) = 642 pixels
The visible box is now 642 pixels wide because (visible) borders and (visible) padding have been added to the content width which is still exactly 600 pixels wide. If we now tried to stuff our visible box inside a containing block that was only 600 pixels wide... well, it wouldn't work very well. More on this is coming up.