0

I am building a website theme for distribution and I just uploaded a unit test to see how things looked. One of the things were nested blockquotes which in my case gave me a very large margin at the bottom. I was able to remedy this by styling

blockquote blockquote {
margin-bottom:0;
}

... so I solved that problem, but it brought out another ... I realised that if someone was to add some content after the second blockquote then the margins would be out. I am sure I could style this but then what if someone was to put a header, pre, code etc in the same position? ... and this scenario doesn't just manifest itself in blockquote ... or just in comments.

My question is this: when building themes for distribution do theme developers style for every single permutation and combination or is this even possible to do ?

byronyasgur
  • 4,627
  • 13
  • 52
  • 96

1 Answers1

1

In this particular instance, it sounds like you added a padding to the blockquote (probably it looks nicer if you also have a background color or border) and because blockquote has a margin-bottom on it by default, the padding-bottom and margin-bottom are adding together.

My current favorite way of dealing with this is like so:

Using Sass:

p, blockquote, .other-margined-elements {
    margin: 1rem 0;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

The generated CSS:

p, blockquote, .other-margined-elements {
    margin: 1em 0;
}

p:first-child, blockquote:first-child, .other-margined-elements:first-child {
    margin-top: 0;
}

p:last-child, blockquote:last-child, .other-margined-elements:last-child {
    margin-bottom: 0;
}

With this method, it's just a matter of figuring out which elements to add to the list. My current list is this: h1, h2, h3, h4, h5, h6, p, ul, ol, dl, table, blockquote, div, section, article, aside, fieldset

There are other ways to do this if you feel the preceding code is a bit overboard:

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
}

Thanks to the :first-child and :last-child psuedo classes, there's no need to write out every single combination.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Thanks for the nice tips. I feel you are not fully getting the point of my question though. What I am asking is whether theme developers style for every single permutation and combination possible or not, and I'm not sure how your techniques cover this. The first/last child example, while being a great technique still means you have to figure out every element on which this would be correct to apply to ( unless you do * > :last-child ) which I would probably avoid ... so the question still stands really as far as I see it. Thanks again. – byronyasgur Dec 17 '12 at 17:22
  • Your question is too vague then. For first/last-child, clearing the top/bottom margins is only necessary when *you're applying a padding or margin* (ie. you already know which elements it's required on because you're the one modifying the properties). – cimmanon Dec 17 '12 at 17:27
  • I think I'm beginning to see what you're saying, thanks, but I don't think my question is vague at all "... do theme developers style for every single permutation and combination or is this even possible to do ?" I'm not asking about how to but whether ... I don't see the vagueness. – byronyasgur Dec 17 '12 at 17:54