Extra space below
element

Question

There is some extra space after div with id "header" element (second div). If I remove p, no space between div element. how to kill space between two div element without removing p element and why it act like it?

body {
  margin: 0px;
  padding: 0px;
}

div#page {
  width: 960px;
  margin: 10px auto;
}

div#header {
  width: 960px;
  height: 80px;
  background-color: lightgray;
}

div#main {
  height: 400px;
  width: 960px;
  background-color: antiquewhite;
}

<div id="page">
  <div id="header">header</div>
  <div id="main">
    <p>we make your business</p>
    <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
    <form action="" method="post">
      <button>about us</button>
    </form>
  </div>
</div>

Give the div which writes "we make your business", `margin-top: 0` — Itay, Feb 23 '17 at 09:38
`div#header { width: 960px; height: 80px; margin-bottom: -16px; background-color: lightgray; }` — dehood, Feb 23 '17 at 09:44

sergdenisov · Answer 1 · 2017-02-23T09:50:22.310

It's because of margin collapsing:

Parent and first/last child
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

You could remove margin-top from your first <p> element, and add padding-top instead to div#main:

body {
  margin: 0px;
  padding: 0px;
}

div#page {
  width: 960px;
  margin: 10px auto;
}

div#header {
  width: 960px;
  height: 80px;
  background-color: lightgray;
}

div#main {
  height: 400px;
  width: 960px;
  background-color: antiquewhite;
  padding-top: 15px;
}

div#main p:first-child {
  margin-top: 0;
}

<div id="page">
  <div id="header">header</div>
  <div id="main">
    <p>we make your business</p>
    <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
    <form action="" method="post">
      <button>about us</button>
    </form>
  </div>
</div>

score 0 · Answer 2 · answered Feb 23 '17 at 09:39

0

If you remove space between these two div then add this CSS:-

#main p:first-child {
    margin: 0px;
}

answered Feb 23 '17 at 09:39

Kashish Agarwal

303
1
15

score 0 · Answer 3 · answered Feb 23 '17 at 09:42

just using * in stead of body element

*{
    margin:0px;
    padding:0px;
}
div#page{
    width:960px;
    margin:10px auto;
}
div#header{
    width:960px;
    height:80px;
    background-color:lightgray;
}
div#main{
    height:400px;
    width:960px;
    background-color:antiquewhite;
}

<div id="page">
        <div id="header">
           header
        </div>
        <div id="main">
            <p>we make your business</p>
            <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
            <form action="" method="post">
                <button>
                    about us
                </button>
            </form>
        </div>
</div>

score 0 · Answer 4 · answered Feb 23 '17 at 09:45

Please try this

<!-- language: lang-css -->
body{
    margin:0px;
    padding:0px;
}
div#page{
    width:960px;
    margin:10px auto;
}
div#header{
    width:960px;
    height:80px;
    background-color:lightgray;
}
div#main{
    height:400px;
    width:960px;
    background-color:antiquewhite;
}
p.demo{
 margin:0px;
}



<!-- language: lang-html -->

    <div id="page">
      <div id="header">
        header
      </div>
      <div id="main">
       <p class="demo">we make your business</p>
       <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
      <form action="" method="post">
          <button>about us
                    </button>
        </form>
      </div>
    </div>

score 0 · Answer 5 · answered Feb 23 '17 at 10:00

quick solution

add padding-top:1px; to div#main

smart solution

use flex, benefits: responsive, less code, more readable, modern

/* the main content will take all remaining space, makin it responsive */

html,
body {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
}

div#page {
  /* make page fill all available space*/
  height: 100%;
  /* change predefined value to 100%, and adjust spaces */
  width: 100%;
  padding: 0 10px;
  margin: 10px auto;
  /* flex usage itself */
  display: flex;
  /* place divs horizontally */
  flex-direction: column;
}

div#header {
  height: 80px;
  /* header will not resize when window resized*/
  flex-shrink: 0;
  background-color: lightgray;
}

div#main {
  /* responsive container, remove width/height, any predefined values */
  background-color: antiquewhite;
  flex: 1;
}

<div id="page">
  <div id="header">
    header
  </div>
  <div id="main">
    <p>we make your business</p>
    <p>Con panna organic americano grinder single origin white mug chicory arabica breve cortado. In sit, aromatic lungo shop body redeye.</p>
    <form action="" method="post">
      <button>about us</button>
    </form>
  </div>
</div>

Flex for this case? I don't think so. You should use flex only when you need its capabilities, not for every case instead of block-level elements. — sergdenisov, Feb 23 '17 at 11:21
@SergeyDenisov disagree, i myself use flex all the time, it has super useful powers, why bother about blocks hmm? Flex will solve small OP problem with that `p`, but also will help to prevent future refactorings, its like killin 2 rabbits with bazuka, kinda _Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime_, cuz im cool dude haha :p anyway have a funny day todays' my birthday <3 — Medet Tleukabiluly, Feb 23 '17 at 11:55

score -1 · Accepted Answer · answered Feb 23 '17 at 09:41

-1

The reason it happens is p tags have an auto margin. More info here

answered Feb 23 '17 at 09:41

paqash

2,294
1
17
22

@rajini-raja it's not fully correct, the most browsers add margins by default, not only Webkit-browsers. And it's not a problem in your case, the problem is [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). Check out [my answer](https://stackoverflow.com/a/42412009/2570353). – sergdenisov Feb 23 '17 at 10:04

Extra space below element

6 Answers6

Extra space below
element