CSS Box Model
The Box Model is the foundation of an element's rendering,
and a necessary concept to understand CSS layouts.
The information on this page is meant to be an overview
of the concepts and properties you need to understand
the Box Model for working with CSS layouts.
All Elements Are Boxes
This is the first and most important concept. Every element
is ultimately housed in a rectangular box with the same
four parts:
- Dimension (width and height)
- Padding (spacing inside the border)
- Border
- Margin (spacing outside the border)
Thus, the CSS properties
width,
height,
padding,
border, and
margin
are considered the 'basic box model properties' of CSS.
This includes the specific border properties
border-width,
border-style, and
border-color,
as well as the side-specific margins and paddings such as
margin-top.
Most browsers include developer tools that can help you visualize
these basic box-model properties on any element that you inspect:
Interesting Secondary Box Model Properties
-
border-radius:
This property applies rounded corners to your borders,
even when other border styles are not set.
Remember to test this property thoroughly--it has
no support in IE8- though there are workarounds
such as the PIE library.
-
box-shadow:
Again, this is a relatively new and fancy style,
with limited support in older browsers.
Even in modern browsers, you may get
weird results
when you apply a box shadow to an element
within a table that has collapsed borders.
-
display:
See Below.
-
box-sizing:
See Below.
The Display Property
Most elements render as "inline" or "block" by default.
It is very common to use inline elements in a semantic way
and then wish to style them as block elements, and also
vice versa. That's where the display property
can assist, and it even has a value of inline-block
to try to achieve the best of both "inline" and "block" concepts.
| Display Value: |
block |
inline |
inline-block |
| Page Flow: |
line breaks before and after |
inline with text and single spaces |
inline with text and single spaces |
| Default Width: |
full available width of container element |
fit to content within |
fit to content within |
| Box Model Properties: |
all properties render as expected |
may not render all box model properties as expected |
all properties render as epxected |
Interesting Details about Display Rendering:
-
Spaces between inline-block elements will render
as spaces on the page. If you wish to remove
those spaces, you can remove the spaces from your
HTML markup or you can use a combination of
display: block; and
float: left; instead.
-
Images are inline by default, so lone images will
have a small space below them, to account for
text descenders. To remove that space,
set your images to
display: block;
-
The declaration
display: none; will
hide an element entirely. This is frequently applied
by JavaScript libraries such as jQuery which have
easy means of toggling elements in and out of view.
Box-Sizing
There are two methods for calculating the total rendered
dimensions of an element: content-box and
border-box, and these values can be explicitly
set using the box-sizing property.
When an element is rendered with content-box
calculation, the rendered dimensions are the sum of the
specified width/height, paddings, and borders.
For example, if you set the following declarations:
width: 300px;
padding: 20px;
border-width: 2px;
then the total rendered width is 322px.
When an element is rendered with border-box
calculation, the rendered dimensions are simply the
specified width/height. For the same declarations above,
the total rendered width would be 300px as specified.
This can be extremely important when creating
percent-based flexible layouts.
Here is a quick diagram to help you visualize the difference:
Most browsers, including all modern browsers,
use content-box as the default calculation.
This is often incredibly obnoxious for maintenance
and makes layout arithmetic difficult from the start.
As a rule, I always include the following code in my
CSS reset file at the beginning of all new projects:
*{
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img, input[type="image"]{
-moz-box-sizing: content-box;
box-sizing: content-box;
}
which greatly simplifies my layout arithmetic
and maintenance of code throughout the project.
(Why include the override for image-based elements
as content-box?
Well that depends on whether you are concerned
about the browser trying to resize your
padded/bordered images
to fit within a border-box calculation.)
As a purely academic note,
the value padding-box
is also allowed for the box-sizing property,
and it does exactly what you probably expect.
However, it does not provide much benefit,
and it was added to the CSS3 specification late,
so many browsers do not support this value.
For more info on box-sizing support,
take a look at the info from
CanIUse.
Centering Elements
Relevant to this discussion is a quick note about centering,
which is one of the most misunderstood techniques in CSS,
despite its relative simplicity.
There are two methods to center content, and the distinction is thus:
To center text within the selected element,
use the declaration text-align:center;
To center the selected element within its container,
use the declaration margin: auto;
The use of "automatic" (read: equal) margins on the left and right
of the element produces the centered result. So it is also valid to
specify something like margin: 20px auto; to achieve
a 20px margin on the top/bottom while centering the element left/right.
Inline elements may not apply this property as expected, so it is often seen
in conjunction with display: block; when applied to
inline elements.
Both methods of centering content are used on this page.
Inspect the TABLE element on this page to see the margin method,
and the TD elements of the table to see the text-align method.