What is causing padding:10px to appear larger on top?

Question

I cannot figure out what is causing the top margin (pink div) to be greater on top (while left, right, bottom are correct); I've specified padding:10px; on the container. Any ideas?

Full page below, or try link here https://codepen.io/joe-oli/pen/ZEEVKZz

UPDATE after too many rushed answers, along the lines of try this, try that...

I am looking for an explanation as to why I have specified #wrapper {padding: 10px}, yet the pink child has a bigger padding on top. It should be 10px on top, bottom, left, right !

<html>

<head>
  <style>
    body {
        background: white;
        padding: 20px;
        font-family: Helvetica;
    }

    #wrapper {
        border: 1px dashed magenta;
        padding: 10px;
        position: relative;
    }

    .yellowBg {
        background-color: yellow !important;
    }

    #theModal {
        display: none;
        font-size: 30px;
        text-align: center;
    }

    .modal {
        display: block !important;
        z-index: 999;
        /* opacity: 0.4; */
        background: rgba(10, 10, 10, 0.4);
        position: absolute;
        width: 100%;
        /* calc(100% - 10px) */
        height: 100%;
        top: 0;
        left: 0;
        cursor: progress;
    }

    button {
        color: #fff;
        /* white */
        background: #0084ff;
        /* blue */
        border: none;
        border-radius: 5px;
        padding: 8px 14px;
        font-size: 15px;
    }
  </style>
</head>

<body>
  <div id="wrapper">

    <div id="theModal">Loading...</div>

    <div style="background-color:hotpink;">
      <p>Hello World !</p>

      <input placeholder="enter something" value="" />

      <input placeholder="and something else" />

      <select>
        <option>apples</option>
        <option>bananas</option>
        <option>oranges</option>
      </select>

      <br /> <br />
      <button id="btnToggle">Click me often</button>

      <button id="btnDoAjax">Do Ajax call</button>
    </div>

  </div>

</body>
</html>

Hi, just add `p {margin-top: 0;}` style in your style sheet for get rid of it. — Prakash Rajotiya, Nov 20 '19 at 05:20
In other way you can add `overflow:hidden` style in your parent `div`. Thanks — Prakash Rajotiya, Nov 20 '19 at 06:12
check the duplicate to understand the *why*. As a side note: you aren't obliged to accept a partial answer if it doesn't contain what you need to know — Temani Afif, Nov 20 '19 at 08:59

score 1 · Answer 1 · edited Nov 20 '19 at 06:05

1

<p>Hello World !</p>

This <p> tag carries margin default so if you want to remove space above div you need to remove margin of p tag that is for Hello world.

css code

p{
margin:0;
}

edited Nov 20 '19 at 06:05

Jon P

19,442
8
49
72

answered Nov 20 '19 at 05:28

Harsha Labhe

11
2

score 0 · Accepted Answer · answered Nov 20 '19 at 05:23

0

p{
  margin:0
}

Use this line after theModal id this will fix this.

answered Nov 20 '19 at 05:23

narayan maity

322
3
13

This works, but why? If the margin is on the p, there should be a gap between p and its parent (the pink div). Yet Hello World is immediately adjacent to the pink div. – joedotnot Nov 20 '19 at 06:02
That margin you getting that was default margin that browser apply. So, I inspected the element it shows user agent stylesheet have 1em margin so I removed with this style property – narayan maity Nov 20 '19 at 08:13

score 0 · Answer 3 · answered Nov 20 '19 at 05:23

Remove default margin-top for " <p>Hello World !</p> " tag 

<html>
<head>
  <style>
    body {
        background: white;
        padding: 20px;
        font-family: Helvetica;
    }

    #wrapper {
        border: 1px dashed magenta;
        padding: 10px;
        position: relative;
    }

    .yellowBg {
        background-color: yellow !important;
    }

    #theModal {
        display: none;
        font-size: 30px;
        text-align: center;
    }

    .modal {
        display: block !important;
        z-index: 999;
        /* opacity: 0.4; */
        background: rgba(10, 10, 10, 0.4);
        position: absolute;
        width: 100%;
        /* calc(100% - 10px) */
        height: 100%;
        top: 0;
        left: 0;
        cursor: progress;
    }

    button {
        color: #fff;
        /* white */
        background: #0084ff;
        /* blue */
        border: none;
        border-radius: 5px;
        padding: 8px 14px;
        font-size: 15px;
    }
    .pink_head{margin-top: 0;}
  </style>
</head>

<body>
  <div id="wrapper">

    <div id="theModal">Loading...</div>

    <div style="background-color:hotpink;">
      <p class="pink_head">Hello World !</p>

      <input placeholder="enter something" value="" />

      <input placeholder="and something else" />

      <select>
        <option>apples</option>
        <option>bananas</option>
        <option>oranges</option>
      </select>

      <br /> <br />
      <button id="btnToggle">Click me often</button>

      <button id="btnDoAjax">Do Ajax call</button>
    </div>

  </div>

</body>
</html>

tag has a default property for margin, it takes margin-top 1em and margin-bottom 1em by default.that is why I told you to remove margin-top for
tag — Nachiket Patel, Nov 20 '19 at 06:03
You are right, it works. But why? If the margin is on the p, there should be a gap between p and its parent (the pink div). Yet Hello World is immediately adjacent to the pink div. — joedotnot, Nov 20 '19 at 06:05
@joedotnot This is called margin collapse. Read more about it [here](https://www.smashingmagazine.com/2019/07/margins-in-css/) and [here](https://css-tricks.com/what-you-should-know-about-collapsing-margins/) — Jon P, Nov 20 '19 at 06:16

score 0 · Answer 4 · edited Dec 27 '19 at 11:55

Try with this code:

HTML:

  <div id="wrapper">
  <div id="theModal">Loading...</div>
  <div class="pink_div" style="background-color:hotpink;">
      <p>Hello World !</p>
      <input placeholder="enter something" value="" /> 
      <input placeholder="and something else" />
      <select>
        <option>apples</option>
        <option>bananas</option>
        <option>oranges</option>
      </select>
      <br/> <br/>
      <button id="btnToggle">Click me often</button>
      <button id="btnDoAjax">Do Ajax call</button>
  </div>
</div>

CSS:

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}
#wrapper {
  border: 1px dashed magenta;
  padding:10px;
  position:relative;
}
.pink_div{
  padding:10px;
}
.pink_div p{
  margin-top:0;
}
.yellowBg {
  background-color:yellow !important;
}

#theModal {
  display:none;
  font-size: 30px;
  text-align:center;
}
.modal {
  display:block !important;
  z-index:999;
  /* opacity: 0.4; */
  background: rgba(10, 10, 10, 0.4);
  position:absolute;
  width: 100%; /* calc(100% - 10px) */
  height: 100%;
  top:0; left:0;
  cursor:progress;
}   
button {
  color: #fff; /* white */
  background: #0084ff; /* blue */
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px; 
}

What is causing padding:10px to appear larger on top?

4 Answers4