Home | Computer Science

<
Margin Collapse

Defination

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. 




Margin

Syntax of Border Radius  is

h1 {

  margin: 0 0 50px 0;

}

 
 
     
  Program

   INPUT

 



<html>
<head>
<style>
h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
</style>
</head>
<body>

<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

</body>
</html>










 

 

     OUTPUT