OOCSS – Spacing between items

[joren]

Hi,

I’m starting to learn OOCSS, and I don’t really know how to handle the space between the objects.

Here’s an example: [blog post](http://bit.ly/V6Vueo “http://bit.ly/V6Vueo”)

As you can see, there is padding between de title and the box, but not between the image and the box. Know I just give padding to the elements inside off the box, but it doesn’t feel right. What if i want to use those elements in another place, with less padding on the left and right…

I have the same problem with the date under the title. If I remove the date, the margin is gone. I could give a margin top to the first paragraph, or work with wrapper divs.

How do you solve this?

[Billy]

If you want to use the padding in another place but with different values, you’ll need to separate the padding from the object.

As to removing the date… do you _want_ to remove it? If so, I would add a margin to the top paragraph, like so:

p:first-of-type {

margin-top: your_value_here;

}

[uneart]

As for the date element I would maybe place the heading and the date both within a

element. Then you can just apply the margin to that one without worrying about the markup in there.

I had the other padding problem myself a while ago. I ended up fixing it with some weird negative margin [like here](http://codepen.io/uneart/pen/vFAxo). But that is by far not a good solution because it will break if you change e.g. the padding.

I really hope someone can bring some light into this.

[Paulie_D]

Can you provide us with link to the actual site or create a use case in Codepen as it will let us see the HTML & CSS as a group so we can focus on the problem.

[uneart]

@Paulie_D I just posted one that immitates his picture ;) Is has weird margin fix in it already. But I’m sure there is a better way.

[Paulie_D]

Actually, I don’t think there is.

I’d rather add a couple of styles for the internal elements than (if you will pardon the expression) **hack** the layout with a margin-fix.

http://codepen.io/Paulie-D/pen/Khmko

That said, if we are to be consistent then it seems likely that text/element padding would be a ‘global’ setting.

[uneart]

Would it maybe be a solution to just have

.art-container > * {
padding: 0 20px;
}
.art-container > .art-full-width {
padding: 0;
}

or do you think the * selector could cause problems?

EDIT: The * selector might be too slow.

[Paulie_D]

I’ve updated my pen slightly.

I wouldn’t use a universal selector (*) it’s incredibly slow as CSS is read right to left.

I would assume that all ‘articles’ are going for a consistent look so

article header,
article p {
padding:0 5%;
}

would be better.

[uneart]

Yes you’re right, I see the performance problem with a * selector. I would use the > selector for your example, though. That would prevent other elements in deeper in there from getting a padding.

I still hope there is any better way to give all elements a space left and right by default and then exclude the image from that.

[Paulie_D]

>I would use the > selector for your example, though. That would prevent other elements in deeper in there from getting a padding.

I see your point but I would anticipate that ‘per article’ there are only a limited number of elements expected.

Clearly if you have different article types then extra classes might be required but again, I would still expect all articles to be roughly the same.

>I still hope there is any better way to give all elements a space left and right by default and then exclude the image from that.

Yeah but I’m not seeing one at the moment.

[Billy]

As to getting them all to have padding except for the img, you can use the `:not()` selector:

article > *:not(img) {

padding: 0 1em;

}

Sadly though, this uses the `*` selector, although I don’t think that the performance difference should be too big really.

[uneart]

> Sadly though, this uses the * selector, although I don’t think that the performance difference should be too big really.

Cool solution, but I think that might might only work for smaller sites. Cause on a really heavy site with thousands of elements, the * selector would be checked on every single one of them which could be a problem.

[joren]

Thanks, I will go with Paulie’s solution. But I’ll add the child selector to it.

article > header, article > p {padding: 0 2em;}

[Author]

Posts