CSS Margin Collapse:-
Sometimes two margin collapse into each other or overlaps.
Margin Collapse:-
Top and backside margins of factors are on occasion collapsed into a single margin that is identical to the most important of the two margins.
This does now not happen on the left and proper margins! Only top and backside margins!
Look at the subsequent instance:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {margin: 0 0 50px 0;}
h2 {20px 0 0 0;}
</style>
</head>
<body>
<p> In this case the h1 detail has a bottom margin of 50px and the h2 detail has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, because of the margin disintegration, the actual margin ends up being 50px.
<h1> Heading 1</h1>
<h2> Heading 2 </h2>
</body>
</html>
Try this code for a better experience
In the example above, the <h1> detail has a backside margin of 50px and the <h2> detail has a pinnacle margin set to 20px.
Common feel would appear to indicate that the vertical margin among the <h1> and the <h2> would be complete of 70px (50px + 20px). But due to the margin falling apart, the real margin ends up being 50px.
.png)
0 Comments