The asymmetric bottom margin is an unfortunate combination of these CSS rules:
pre { margin-bottom: 1em; }
blockquote { padding: 10px; }
so it could be fixed with:
blockquote > pre:last-child { margin-bottom: 0; }
with the following result:
I note that the style sheet already has a similar rule for p
elements, presumably for the same reason:
blockquote p:last-child { margin-bottom: 0 }
I think it's probably an error to omit the >
here, because a p
element can match :last-child
without being the last child of the blockquote
— it might be the last child of some intervening element such as li
, in which case we should only suppress the margin if it's the last li
in the ol
and the last ol
in the blockquote
. To handle these cases, we need something like:
blockquote > *:last-child,
blockquote > *:last-child > *:last-child,
blockquote > *:last-child > *:last-child > *:last-child {
margin-bottom: 0;
}
Of course this will fail for more deeply nested structures, but I don't know how to specify the property of being the last descendant of an element in CSS.
I have all this in my user style sheet using Stylish.