With the CSS box model each element is considered a box.
This box consists of a border, a margin, a padding and the content itself.
The CSS box model is used by the browser to properly place elements on a page.
This image demonstrates the parts of the box model.
Margin - Space outside the border. Margin is not stylable.
Border - A 4-sided line around the content and the padding. Stylable.
Padding - Space between the content and the border. Not stylable.
Content - Text, images, and other content. Stylable.
For details on box-sizing, see our CSS box-sizing Property Reference.
An element with content, and equally-sized margin,
border, and
padding.
Padding and margin are transparent
<style>
.box-model {
max-width: 500px;
border: 25px solid lightblue;
padding: 25px;
margin: 25px;
}
</style>
<div class="box-model">Content</div>
Considering the box model, how are width and height calculated?
In other words, does it include content, padding, border, margin?
The CSS box model states that width = content + padding + border. It disregards margin.
The same formula applies to the height.
In this example, the visible part, including the border, is 400px wide.
The margin is ignored (see calculation below).
<style>
.box {
width: 350px;
padding: 20px;
border: 5px solid #302ea3;
background-color: aliceblue;
margin: 25px;
}
</style>
<div class="box">CSS box model</div>
The total width is calculated as follows:
350px (content width) + 20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border) = 400px
Height calculations work the same way.
