title: CSS Div Padding
body: <p>I am struggling with what I suspect is a very basic concept with CSS (which I am just now learning).  As you can see from my code below I have a very basic div element and a css file that sets the height of the div, and attempts to set the padding.  What I do not understand is why the text will not stay centered vertically in the middle of the div when the padding-top and the padding-bottom are the same (10px).</p>
  <pre><code>&lt;div id=&quot;div_header&quot;&gt;
      &lt;h1&gt;Website TITLE&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And here is the css:</p>
  <pre><code>#div_header{
  background:#E07A1A;
  font-family: var(--global-font-family);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--global-text-color);
  height: 60px;
  width: 100%;
  padding-left: 20px;
  Padding-top: 10px;
  padding-bottom: 10px;
  }
  </code></pre>
  <p>With the settings as shown, this is what it looks like:</p>
  <p><a href="https://i.stack.imgur.com/vncnI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vncnI.png" alt="enter image description here" /></a></p>
  <p>What am I doing wrong?</p>