CSS box model examples
This article is about the CSS box model with examples.
Why understand the CSS box model?
Understanding the box models clearly will help us design web page layouts, which are more manageable and easily editable.
CSS box model says,
- Imagine every HTML element as a rectangle box meant to hold content.
- Content may be text, an image, a PDF, a video, etc.
- Every box includes four important areas. They are the content area, padding area, border area, and margin area.
Box Model
See the above image, I have drawn an HTML element with its component areas, content area, padding area, border area, and margin area. Let’s discuss each of these areas in detail.
Content area
The amount of space required to display the content or the area occupied by the content. It is determined by CSS ‘width’ property and CSS ‘height’ property. We can set the width of the content area by using the CSS ‘width’ property and we can set the height of the content area by using the CSS ‘height’ property. See the above box model image, The content area contains within the padding area
Padding area
- The distance between the content and the border.
- The empty space or empty area around the content.
- It is determined by the CSS padding property.
See the box model image, around the content the empty space it is known as padding. The padding property is used to clear the space or area around a content padding. It is the distance or the space between the content and the border.
Border area
- The area is occupied by the border.
- The area around the padding is meant to display the border.
- It is determined by CSS border property.
See the box model image, the border is placed inside the margin area and it doesn’t display space, displays only a border.
Margin area
- The area is occupied by the border.
- The empty space or empty area around the border.
- It is determined by the CSS margin property.
the white space around the HTML element is actually a margin area. And CSS margin property is used to clear the area around the border.
Example code for box model
<html>
<head>
<style type="text/css">
div{
padding: 10px;
border: 2px black solid;
margin :15px;
background-color: skyblue;
}
</style>
</head>
<body>
<div><h1>CONTENT</h1></div>
</body>
</html>Output:
In the above code, Some text is inside the div tag. The div tag contain 10px of padding, 2px of border and 15px of margin. So, see the output with the computed box model. All the padding margin and border values we have given to the div tag have been applied in the computed box-model
