tags:

views:

23

answers:

2

I have a page with one div and 1 H1 tag in the div;

I am giving a margin to a H1 and it's giving the margin the the entire div

Why is this?

http://craveadeal.com/indexV2.php

Here is the entire code:

<style type="text/css">
<!--
* {
 margin: 0px;
 padding: 0px;
}
#wrapper {
 margin-right: auto;
 margin-left: auto;
 background-image: url(image-files/mockupV2.jpg);
 background-repeat: no-repeat;
 height: 555px;
 width: 1040px;
 background-position: center top;
}
#wrapper h1 {
 text-align: center;
 font-size: 72px;
 font-family: "Comic Sans MS", cursive;
 text-decoration: blink;
 color: #F07D00;
 background-color: #000;
 margin-right: 125px;
 margin-left: 125px;
 display: block;
 margin-top: 125px;
}
-->
</style>
</head>

<body>
<div id="wrapper"><h1>COMING SOON</h1>

</div>
</body>
A: 

The Problem

It's being caused by margin collapse:

"In this specification, the expression collapsing margins means that adjoining margins of two or more boxes combine to form a single margin."

Or more simply:

when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.

The Solution

You can fix it by:

  1. Adding vertical padding to your #wrapper.
  2. Adding a border to your #wrapper.
  3. Floating your <h1>.
Pat
A: 

Just add a overflow:hidden to the #wrapper

That should work.

adardesign