How to disable margin-collapsing in CSS ?
Last Updated :
26 Apr, 2023
Margin collapsing is a behavior of CSS where the vertical margins of block-level elements are combined into one i.e. to the margin of the element with the largest value. Sometimes when we assigned margins to elements it does not work in the way we think it to and that creates confusion.
In this article, we will discuss five different approaches to prevent margin collapsing in CSS. These approaches include padding or a border to the parent element, floating the child elements, setting the display property of the child elements to inline-block, and using the clear property to clear the float.
1. Adding Padding to the Parent Element: One approach to disable margin collapsing is to add padding to the parent element. This will create a new block formatting context, which will prevent the margins of the child elements from collapsing with the margins of the parent element.
Syntax:
.parent {
padding: <value>;
}
Example: In this example, we create a parent container with the class “parent”. Inside the parent container, we create two child containers with the class “child”. We set the margin of the child containers to 10px, which would normally collapse with the margin of the parent container. To prevent this from happening, we add a padding of 1px to the parent container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
}
.parent {
padding: 1px;
background-color: lightgray;
}
.child {
margin: 10px;
height: 50px;
width: 50px;
background-color: teal;
}
</style>
<title>
Adding Padding to the Parent Element
</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
|
Output:
2. Using Border on the Parent Element: Another approach to disable margin collapsing is to add a border to the parent element. This will create a new block formatting context, which will prevent the margins of the child elements from collapsing with the margins of the parent element.
Syntax:
.parent {
border: <value>;
}
Example: In this example, we create a parent container with the class “parent”. Inside the parent container, we create two child containers with the class “child”. We set the margin of the child containers to 10px, which would normally collapse with the margin of the parent container. To prevent this from happening, we add a transparent border of 1px to the parent container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
}
.parent {
border: 1px solid transparent;
background-color: lightgray;
}
.child {
margin: 10px;
height: 50px;
width: 50px;
color: white;
background-color: green;
}
</style>
<title>Using Border on the Parent Element</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
|
Output
3. Using float property: The float property can be used to prevent margin collapsing. When an element is floated, it is taken out of the normal flow of the document, which prevents the margins from collapsing.
Syntax :
.child {
float: <value>;
}
Example: In this example, we create a parent container with the class “parent”. Inside the parent container, we create two child containers with the class “child”. We set the margin of the child containers to 10px, which would normally collapse with the margin of the parent container. To prevent this from happening, we float the child containers to the left and add an empty div with the “clear” property to clear the float.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
}
.parent {
background-color: lightgray;
}
.child {
float: left;
margin: 10px;
height: 50px;
width: 50px;
background-color: black;
}
</style>
<title> Using float property</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
|
Output
4. Using display: inline-block property: The display: inline-block property can also be used to prevent margin collapsing. When an element is set to display: inline-block, it creates a new block formatting context, which prevents the margins from collapsing.
Syntax :
.child {
display: inline-block;
}
Example: In this example, we create a parent container with the class “parent”. Inside the parent container, we create two child containers with the class “child”. We set the margin of the child containers to 10px, which would normally collapse with the margin of the parent container. To prevent this from happening, we set the display property of the child containers to inline-block.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
}
.parent {
background-color: crimson;
}
.child {
display: inline-block;
margin: 10px;
height: 50px;
width: 50px;
background-color: white;
}
</style>
<title>Using display: inline-block property</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
|
Output
5. Using the clear property: The clear property can be used to prevent margin collapsing between two elements. When an element is cleared, it is moved down below any floated elements, which prevents the margins from collapsing.
Syntax :
.child {
clear: <value>;
}
Example: In this example, we create a parent container with the class “parent”. Inside the parent container, we create two child containers with the class “child”. We set the margin of the child containers to 10px, which would normally collapse with the margin of the other child container. To prevent this from happening, we float the child containers to the left and add an empty div with the “clear” property to clear the float.
Output
Conclusion: These are some of the approaches to disable margin collapsing in CSS. Each approach has its own advantages and disadvantages, so you should choose the one that works best for your specific situation. By preventing margin collapsing, you can ensure that your web pages look the way you intended them to.
Share your thoughts in the comments
Please Login to comment...