joren

# January 23, 2013 at 9:48 am

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

# January 23, 2013 at 10:11 am

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

# January 23, 2013 at 10:48 am

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

# January 23, 2013 at 11:03 am

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

# January 23, 2013 at 11:08 am

@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

# January 23, 2013 at 11:24 am

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

# January 23, 2013 at 11:31 am

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

# January 23, 2013 at 11:36 am

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

# January 23, 2013 at 11:41 am

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

# January 23, 2013 at 11:48 am

>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

# January 23, 2013 at 12:02 pm

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

# January 23, 2013 at 12:09 pm

> 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

# January 26, 2013 at 5:36 am

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

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