Demonstrate Margin collapse in HTML and CSS

Description

The following code shows how to demonstrate Margin collapse.

Example


<!--   www  . j a  v  a2 s.  com-->
<html>
<head>
<title>margin</title>
<style type='text/css'>

div#wrapper {
background: yellow;
border: 1px solid #fff;
margin: -1px;
width: 122px;
}
div.margin {
width: 100px;
height: 100px;
background: mistyrose;
border: 1px solid pink;
}
div#top-right-bottom-left {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
div#top-right-bottom-left-1 {
margin: 10px 10px 10px 10px;
}
</style>


</head>
<body>
<div id='wrapper'>
<div id='top-right-bottom-left' class='margin'></div>
<div id='top-right-bottom-left-1' class='margin'></div>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Demonstrate Margin collapse in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Margin

HTML CSS Tutorial Margin
Add margin between sibling in HTML and CSS
Add margin to list item in HTML and CSS

Demonstrate Margin collapse in HTML and CSS

Demonstrate margin collapse for nested elem...
Demonstrate margin collapse for nested elem...
Demonstrate margin collapsing also happens ...
Set Margin between parent and children in H...
Set Margin with four values in HTML and CSS
Set Margin with three values in HTML and CS...
Set Margin with two values in HTML and CSS
Set four separate margin properties: margin...
Set margin bottom to 15px in HTML and CSS
Set margin bottom to 5% in HTML and CSS
Set margin for hr and auto align hr to cent...
Set margin for top right left bottom in HTM...
Set margin-left and margin-right with perce...
Set margin left and right to auto to center...
Set margin-left to 10px in HTML and CSS
Set margin-left to 25% in HTML and CSS
Set margin-left to auto in HTML and CSS
Set margin left to auto to align element to...
Set margin-left to auto to align to right i...
Set margin right to auto to align element t...
Set margin-right to auto to align to left i...
Set margin to auto to center a paragraph in...
Set to use a negative margin in HTML and CS...
Use auto margin to align block to center in...
Use auto margin to align block to left in H...
Use auto margin to align block to right in ...
Use auto margin to float element to center,...
Use margin auto to align div element to cen...
Use margin to make offset in HTML and CSS
Use margin to offset child in HTML and CSS