CSS Box Model
As the browser lays out HTML elements in a page, it uses the CSS Box Model to determine the size and space between elements. The CSS box is composed of four nested areas (or outer edges): the content edge, padding edge, border edge, and margin edge.
Content Area contains the actual content of the element (the text, image, etc). By default the CSS properties
height set this size, and the
max-height constrain it (but see the discussion of
Padding Area provides space between the content and the border of the HTML element. It is set by the
padding properties (
padding-left, as well as the shorthand versions).
Border Area draws a border around the element. Its size is set with the
border-width property. Borders can also be dashed, inset, and given rounded corners. See the MDN Border Documentation
Margin Area provides the space between the border and neighboring elements. Its size is set with the
margin properties (
margin-left, as well as the shorthand versions).
By default, an element’s
height properties set the width and height of the content area, which means any padding, borders, and margins increase the size the element consumes on-screen. This can be altered with the
box-sizing CSS rule, which has the following possible values:
content-box (the default) the
height properties set the content area’s size.
border-box includes the border area, padding area, and content area within the
height of the HTML element. Using the CSS rule
box-sizing: border-box therefore makes it easier to lay out elements on the page consistently, without having to do a lot of by-hand calculations.
background property allows you to set a color, pattern, or image as the background of an HTML element. By default the background extends to the border-area edge, but can be altered with the
border-clip property to
content-box. See the MDN Background Documentation
for more details on creating backgrounds.
box-shadow property allows you to set a drop shadow beneath the HTML element. See the MDN Documentation
for more details on creating box shadows.