Unexplained Space Between Divs

Question

HTML and CSS below. Div id "black" seems to be pushing a space between itself and the "brown" div above it. When I remove the "black" div, the excess space disappears. I have all margins and padding at zero. Can't sort out what's causing this. ANy suggestions are appreciated.

html {
  padding: 0;
  margin: 0;
}
body {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: raleway;
  font-style: normal;
  font-weight: 400;
  color: #000000;
}
#greyWrapper {
  background-color: #303030;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #FFFFFF;
  height: auto;
}
#Brown {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: #644015;
}
#Brown ul {
  text-decoration: none;
  list-style-type: none;
  text-transform: uppercase;
  font-size: 0.7em;
  margin: 0;
  padding: 0;
}
#Brown ul li {
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}
#black {
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  width: 100%;
  background-color: #000000;
  height: auto;
}

<div id="greyWrapper">
  <div id="Brown">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Portfolios</li>
      <li>Team</li>
      <li>Blog</li>
      <li>Contact</li>
    </ul>
  </div>
  <div id="black">
    <p>Grab Your Copy Of</p>
    <p>The Premium Quality PSD Template</p>
    <p>For free Download</p>
  </div>
</div>

The space is caused by the margin on the first `
` inside `div#black`. This is known as [collapsing margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing). — showdev, Feb 25 '15 at 22:48
Do a css element style reset before applying your style on elements. — Nagendra Rao, Feb 25 '15 at 22:54
possible duplicate of [How to disable margin-collapsing?](http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) — showdev, Feb 25 '15 at 22:55

score 3 · Answer 1 · edited May 23 '17 at 12:12

3

Your ps have a margin and this margin extends beyond the limits of the #black div and "push against" the #brown div. There's a good explanation in Why does this CSS margin-top style not work?

You can either:

Put a border around #black. The border will force the div to expand so that it contains all of the margins of the children.

#black {
    border: 1px solid black;
}

or

Remove the top margin of the topmost paragraph

#black > p:first-child {
    margin-top: 0px;
}

edited May 23 '17 at 12:12

Community

1
1

answered Feb 25 '15 at 23:00

abl

5,970
4
25
44

That was it - default margin on the
tag. Set that to zero and space closed up. Thank you! Now... how do i mark this as "answered?...
– Murf17 Feb 26 '15 at 23:50
tag margin. Yes! Thank you. – Murf17 Feb 26 '15 at 23:51

score 2 · Accepted Answer · answered Feb 25 '15 at 22:48

2

It's the automatic margin-before on the <p> tag that is applied by most browsers. Set:

#black p {
    margin: 0
}

and you'll see it go away.

answered Feb 25 '15 at 22:48

Joshua Whitley

1,196
7
21

What is "margin-before"? What if the OP wants some margin on the `
` tags?
– showdev Feb 25 '15 at 22:50
1

Darn it Joshua, you beat me. – Nick Bailey Feb 25 '15 at 22:51
NickBailey lol, showdev - It's Chrome custom property. I more specifically meant margin-top but the browser-specific version for the automatically-added margin in Chrome is margin-before. – Joshua Whitley Feb 25 '15 at 22:52

Unexplained Space Between Divs

2 Answers2