Margin Collapsing : margin : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » margin »

Margin Collapsing


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
  color: #353535;
  padding: 1em;
}

h1 {
  font-size: 2.4em;
  font-weight: normal;
}


.wrapper {
  width: 420px;
  border: 1px solid gray;
  margin: 20px;
}


#box1 {
  margin: 10px;
  background-color:#d5d5d5;
}

#box2 {
  margin: 10px;
  background-color:#d5d5d5;
  padding: 1px;
}

p {
  margin: 20px;
  background-color:#90C2F3;
}

</style>
</head>

<body>

<div class="wrapper">
<div id="box1">
<p>This paragraph has a 20px margin.</p>
</div>
</div>
<div class="wrapper">
<div id="box2">
<p>This paragraph has a 20px margin.</p>
</div>
</div>
</body>
</html>