How do I increase the spacing between different parts of blockquotes with CSS?

Question

I have a bunch of nested quotes I want to display, but I find (see the attached example below) that the spacing between quotes is too small. How do I increase this?

HTML:

<blockquote>stuff
  <blockquote>neato</blockquote>
</blockquote>

CSS:

blockquote {
    border-left: 1.5px solid #ccc;
    color: #888;
    margin: 0 0 10px 0;
    padding: 0 0 0 12px;
}

Here's an interactive example: http://codepen.io/anon/pen/bNKZVo?editors=110

In that example I find the spacing under "neat" and the next quote is too tight and I'd like more room. I tried line-height, but while the spacing between them eventually gets better, (around 50 line height) it makes the second quote of an absurd height.

`padding: 12px 0 0 12px;` perhaps? – Joseph Marikle Mar 01 '15 at 21:45 — Joseph Marikle, Mar 01 '15 at 21:45

score 2 · Accepted Answer · answered Mar 01 '15 at 21:45

2

If you want to add margin top to nested bloquote do exactly that, in CSS you can express that as:

blockquote blockquote {margin-top:10px}

This way there is no margin on the top level bloquote, but all the nested do get it.

answered Mar 01 '15 at 21:45

Hurda

4,647
8
35
49

OP might need that to be padding. There's a left border in the example. – Joseph Marikle Mar 01 '15 at 21:46

score 0 · Answer 2 · answered Mar 01 '15 at 21:47

0

What about a new CSS block:

blockquote > blockquote {
    margin-top: 20px;
}

That will affect only the nested quotes, and not the top-level one.

answered Mar 01 '15 at 21:47

Sam

8,330
2
26
51

NOTE: this will only affect direct children – Hurda Mar 01 '15 at 21:49

How do I increase the spacing between different parts of blockquotes with CSS?

2 Answers2