The CSS box model is used to create the design and layout of websites. It consists of: margins, borders, padding, and the content itself. The CSS box model allows us to add a border around elements, and to define space between elements. The image below illustrates the box model:
Explanations of the different parts:
Margin Area – This area consists of space between the border and the margin. The margin is transparent.
Border Area – The border that goes around the padding and content. Its dimensions are given by the height and width of the border.
Padding Area – It includes the element’s padding. The padding is transparent.
Content Area – The content of the box, where text and images appear.
Example:
The CSS box model contains: borders, padding, margins, and content.
<!DOCTYPE html>
<html>
<head>
<style>
.box-model {
background-color: #e9c46a;
width: 400px;
border: 10px solid #2a9d8f;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box-model">
This CSS box model contains:
content(text),
padding: 20px,
margin: 10px,
border: 10px.
</div>
</body>
</html>Output:
Width and height in the CSS box model:
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
To calculate the full size of an element, you must also add padding, borders, and margins.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" width="350" height="263" alt="web dev">
<div>The image above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>Output:
Calculation:
320px (width) + 20px (left and right padding) + 10 px (left and right border) + 0 px (left and right margin) = 350 px
Hope it helps, enjoy coding!
Read also: