A tip for tidy quotes

A little tip for tidying up your blockquote styles.

Quite often I see blockquotes used where there’s an extra gap at the bottom because due to the designers choice of styling (typically padding out quotes) you (or in this case me) end up with the last paragraph that has a bottom margin unbalancing everything a little. Thankfully, it’s easy to fix.

Unfixed, you often get the margin on the bottom paragraph and any padding on the blockquote which unbalances the design and vertical flow a little.


Applying a simple but often forgotten fix in your CSS should tidy everything:

blockquote p:last-child {
 margin-bottom: 0;

With that small fix, you get a tidier result.


There you have it, an oft forgotten little fix to keep your quotes nice and tidy by removing the bottom margin on the last paragraph in your blockquotes. While you’re doing a little housekeeping, have you checked you don’t have text shadow on your highlight styles?

Posted 1 year ago on · Permalink