Question

As you can see in the image attached, I have a wrapper div inside which I have section.
Now, I want that all content inside section should have space on all sides (i.e. I want padding on all content inside section. I cannot do,

section {
  padding:20px;
}

because it will increase the width of section to 1020 + 20 (left padding) + 20 (right padding) = 1060px.

Since, direct children inside section are not always div (there are aside and p too), I cant do

section div{
 margin:20px;
}

Currently, I am doing

section > *{
    margin:20px;
}

So that every element takes a 20px margin from section. This works for me but I’ve heard that we should not use universal selector (*), its a performance bottleneck. Also, is this even cross browser ?

I’ve also thought to create a wrapper div inside all sections which will take all all elements inside it, so that I can do

section > div{
  margin:20px;
}

But, is this worth changing markup . Will it be so slow with universal selector ?

Answer 1

You can use comma separated selectors, like this

section > div, section > aside, section > p {
    margin:20px;
}

Or, of course, give all the things that need margins a class, and use that class for a selector. As long as you don’t use “hasmargins” for a class name…

But I’m not sure why you think that by giving the sections inside the wrapper div a padding, you’ll increase the total width of the wrapper div. Am I missing something?