All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
The CSS box model is essentially a box that wraps each HTML element. It consists of the content itself, its margins, borders, and padding.
This image demonstrates the idea of the box model.
Content: The actual content of the box. Includes any text, images or other presentational item.
If the box-sizing property is set to content-box (default), the content area’s size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.
Padding: Clears an area around the content. Padding is transparent.
The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.
Note: When the content area has a background, it extends into the padding.
Border: A border surrounds the padding and content.
By default the border has a size of 0 — making it invisible — but you can set the thickness, style and color of the border to make it appear.
The thickness of the borders are determined by the border-width and shorthand border properties.
border-top, border-right, border-bottom, border-left: Set the thickness, style and color of one side.
border-width, border-style, border-color: Set the thickness, style, or color individually, but for all four sides.
You can also set one of the three properties of a single side of the border individually, using border-top-width, border-top-style, border-top-color, etc.
Margin: Clears another area outside of the border. Margin is also transparent
Used to separate the element from its neighbors. Determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties.
Note: Margins have a specific behavior called margin collapsing: When two boxes touch against one another, the distance between them is the value of the largest of the two touching margins, and not their sum.
Note: Vertical margins, top and bottom, are not accepted by inline-level elements.
You can use this model to define space and border around and between different html elements.
div {
width: 200px;
margin: 10px;
padding: 15px;
border: 2px solid black;
}
Understanding the size of an HTML element
It is important to remember that when you set the height and width properties with css, you are only setting the size of the content.
To calculate the total size of an element, you need at add padding, borders and margins.
If we needed an element to have a total width of 350px, we would use all of these properties.
div {
width: 320px;
margin: 0px;
padding: 10px;
border: 5px solid black;
}
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin