I have html and css files.
<!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">
<title>CSS Display</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<p>This is a paragraph.</p>
<p>This is <span class="opposite">another</span> paragraph.</p>
<!-- <nav>
<ul>
<li><a href="#">Intro</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav> -->
</main>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
font-size: 2rem;
font-family: "Roboto", sans-serif;
}
main {
background-color: aqua;
width: 50%;
}
p {
background-color: #444;
margin: 100px;
}
Now I don’t understand why I am getting output like this:
I was expecting p tag to be 100px away from all sides. But I can see that it’s not 100px away from main tag, in top and bottom instead the main element moves itself by 100px down. which is not the case in horizontal direction.
What is the reason for this?
>Solution :
This behavior is called Margin Collapsing. You can read more by visiting the link. But here is how it’s defined:
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.
It can happen in some well-known cases, but the one you are facing is this one:
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
There are several ways to work around this issue. One is to add padding on the parent, main in your case:
main {
background-color: aqua;
padding:1px; /* This small padding fixes the callapsing of margin issue*/
}
p {
background-color: #444;
margin: 100px;
}<main>
<p>This is a paragraph.</p>
<p>This is <span class="opposite">another</span> paragraph.</p>
</main>