0

I understand the container model fully, but I'm wondering about best practice in my current case.

Here is the site http://dev.permi.co/ - based on _s wordpress theme.

Here's part of the HTML:

<div class='content-area'>
    <div class='entry-header'>
    <h1 class='entry-title'>
    </div>
</div>

Here's the margins/padding currently in place:

.content-area {padding:10px;}
h1.entry-title {background-color:#111111;}

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: CSS, nested divs & margins vs. padding

However, they mention with Backgrounds, you should perhaps use padding on the individual elements instead.

I do want the padding around the background color, so the color doesn't extend all the way.

However, I ALSO need padding inside the H1 so it's not right next to the gutter.

Will I need to remove the parent padding, and add padding to all child elements? Then add a margin to this H1 as well?

If so, are there any performance or compatibility concerns? I'm pretty new with CSS, I'm more dev-oriented.

Community
  • 1
  • 1
sricks
  • 409
  • 2
  • 16

1 Answers1

0

Yes, the best solution is to add the padding into the child objects... Or add background-color to the parent object...

Seazoux
  • 621
  • 1
  • 5
  • 28