Content :
The innermost component of the box model is the actual content of the element. It can be text, image, video, etc.
The content area is defined by the width and height properties.
CSS Box Model
The CSS Box model defines how elements are rendered and how their dimensions are calculated.
It describes the structure of an element as a rectangular box that has content, padding, a border, and a margin.
The box model consists of four main components, which are
Padding :
The space between the actual content and the border of the element is the padding.
The padding area is defined by the property padding. For more details, follow the CSS Padding tutorial.
Border :
The border surrounds the content and padding and gives the visual border of the element.
The border properties can be controlled using the border keyword. For more details, follow the CSS Borders tutorial.
Margin :
The margin is the space outside the element that separates it from other elements in the layout.
The margin of the element is controlled by the margin property. For more details, follow the CSS Margin tutorial.
Margin Collapse:
Margin collapse is a behavior in CSS where the vertical margins of adjacent elements (top and bottom) combine or "collapse" into a single margin instead of stacking on top of each other.
Here’s an easy way to understand it:
Key Points:
- When it happens:
- Why it happens:
Between adjacent elements : If one element has a bottom margin and the next element has a top margin, the larger of the two margins will be used instead of adding them together.
For nested elements : If a parent element and its child both have vertical margins, they can collapse.
For empty elements : If an element has no content, its top and bottom margins can collapse.
To prevent unnecessarily large gaps in your layout when multiple vertical margins meet.
Example :
Without Margin Collapse :
Imagine two boxes :
- The first box has a margin-bottom: 20px.
- The second box has a margin-bottom: 30px.
- In reality, with margin collapse, the space between the boxes will be the larger of the two margins: 30px.
If margins did not collapse, the space between the boxes would be 20px + 30px = 50px.
With Margin Collapse :
Calculating the total dimension of the element :
The total width and height of the element is calculated with the formula :
Total Width = Width + Left Padding + Right Padding + Left Border + Right Border + Left Margin + Right Margin
Total Height = Height + Top Padding + Bottom Padding + Top Border + Bottom Border + Top Margin + Bottom Margin
Example :
<head>
<style>
p{
width: 200px;
height: 300px;
padding: 15px;
border: 10px solid red;
margin: 5px;
}
</style>
</head>
<body>
<p>CodeWithHarry</p>
</body>
</html>
Here, the total height and width will be represented as
Total Width = 200px (width) + 15px (left padding) + 15px (right padding) + 10px (left border) + 10px (right border) + 5px (left margin) + 5px (right margin) = 260px
Total Width = 300px (Height) + 15px (Top Padding) + 15px (Bottom Padding) + 10px (Top Border) + 10px (Bottom Border) + 5px (Top Margin) + 5px (Bottom Margin) = 360px