title: CSS Padding vs Margin for Typography with Backgrounds in Parent vs Child
body: <p>I understand the container model fully, but I'm wondering about best practice in my current case.</p>
  
  <p>Here is the site <a href="http://dev.permi.co/" rel="nofollow noreferrer">http://dev.permi.co/</a> - based on _s wordpress theme.</p>
  
  <p>Here's part of the HTML:</p>
  
  <pre><code>&lt;div class='content-area'&gt;
      &lt;div class='entry-header'&gt;
      &lt;h1 class='entry-title'&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the margins/padding currently in place:</p>
  
  <pre><code>.content-area {padding:10px;}
  h1.entry-title {background-color:#111111;}
  </code></pre>
  
  <p>All I have is padding on the parent div. This way I only have to add padding once, which seems right from what I can find: <a href="https://stackoverflow.com/questions/1419519/css-nested-divs-margins-vs-padding">CSS, nested divs &amp; margins vs. padding</a></p>
  
  <p>However, they mention with Backgrounds, you should perhaps use padding on the individual elements instead.</p>
  
  <p>I do want the padding around the background color, so the color doesn't extend all the way.</p>
  
  <p>However, I ALSO need padding inside the H1 so it's not right next to the gutter.</p>
  
  <p>Will I need to remove the parent padding, and add padding to all child elements? Then add a margin to this H1 as well? </p>
  
  <p>If so, are there any performance or compatibility concerns? I'm pretty new with CSS, I'm more dev-oriented.</p>