是什么导致 padding:10px 在顶部显得更大？

Question

我无法弄清楚是什么导致上边距（粉红色 div）在顶部变大（而左、右、下是正确的）；我指定了 padding:10px；在容器上。有什么想法吗？

整页如下，或尝试 link 此处 https://codepen.io/joe-oli/pen/ZEEVKZz

UPDATE 在匆忙回答太多之后，尝试这个，尝试那个...

我正在寻找关于为什么指定 #wrapper {padding: 10px} 的解释，但粉红色 child 顶部的填充更大。它应该在顶部、底部、左侧、右侧为 10px！

<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>

Answer 1

p{
  margin:0
}

在模态 ID 之后使用这一行，这将解决这个问题。

Answer 2

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>

Answer 3

尝试使用此代码：

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; 
}

Answer 4

<p>Hello World !</p>

此 <p> 标签带有默认边距，因此如果您想删除 space 以上 div 您需要删除用于 Hello world 的 p 标签的边距。

css代码

p{
margin:0;
}

是什么导致 padding:10px 在顶部显得更大？

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

css

margin

padding