Grow your CSS skills. Land your dream job.

OOCSS – Spacing between items

  • # 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?

    # 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;
    }
    # 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.

    # 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.

    # 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.

    # 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.

    # 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.

    # 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.

    # 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.

    # 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.

    # 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.

    # 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.

    # 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;}

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".