HTML and CSS Reference
In-Depth Information
The Box Model
The box model dictates the area that an element takes up on screen, and therefore impacts
the positioning of other elements that need to be positioned around it.
Each element in the document tree is represented on screen by a rectangular box. This in-
cludes
div
elements,
span
elements,
a
elements, and any other element in the document tree
that has a visual aspect.
In order to understand CSS layout it is necessary to understand the various stylistic proper-
ties that affect the size of a box.
• Firstly, each box needs an area where its content should appear.
• Secondly, you may specify padding between the content and the border.
• Thirdly, you may specify the size of the border.
• And fourthly, you can specify the margin that should occur between the border of this com-
ponent and the components positioned adjacent to it.
In addition, you need to consider what it means to set the background color of the element,
should that fill the entire space, just the content, or something in between?
These four properties constitute the box model that can be seen in the diagram below:
