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

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>

Solution

p{
  margin:0
}

Use this line after theModal id this will fix this.