Search code examples
htmlcssblockquote

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

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.

Solution

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