WordPress.org

Make WordPress Core

#21764 closed defect (bug) (fixed)

Twenty Twelve: Blockquotes have no bottom margin — touch paragraphs below them

Reported by: markjaquith Owned by: lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

In Twenty Twelve, blockquotes have no bottom margin. Any content below them gets an unrequested lap dance.

I've applied a background color to blockquotes to illustrate the problem:

http://cl.ly/image/3x3Z1T130y2p/Screen%20Shot%202012-09-01%20at%203.33.37%20AM.png

You don't see the issue without giving the blockquote a background color because the margin-bottom of the last paragraph in the blockquote provides the appropriate spacing. But as soon as blockquotes have any sort of background styling or a border, the odd spacing will manifest.

This is what I'm using in my child theme to fix it.

article .entry-content blockquote {
	margin-bottom: 24px;
}

article .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

Normally p has a margin-bottom of 24. This gives that to the blockquote, and takes it away from the last paragraph in a blockquote (if that paragraph is the last child element of the blockquote).

Attachments (1)

21764.diff (1.2 KB) - added by obenland 20 months ago.

Download all attachments as: .zip

Change History (7)

comment:1 SergeyBiryukov20 months ago

  • Component changed from Themes to Bundled Theme
  • Milestone changed from Awaiting Review to 3.5
  • Summary changed from Twenty Twelve Blockquotes have no bottom margin — touch paragraphs below them to Twenty Twelve: Blockquotes have no bottom margin — touch paragraphs below them

comment:2 markjaquith20 months ago

Also:

article.format-aside blockquote p:last-child {
	padding-bottom: 0;
}

obenland20 months ago

comment:3 obenland20 months ago

  • Cc drewstrojny added
  • Keywords has-patch added

I agree with Mark. Styling blockquotes with a background color is not rare and we shoud expect Child Themes to do that. (Mark's) Patch addresses the issue without changing the visual appearance of blockquotes in Twenty Twelve.

For Aside posts, I'd propose switching back to use margin for <p>s and just remove it from the last child. @DrewStrojny: Was switching to padding a measure to remove the space from the last element?

We could also think about using a article.format-aside .entry-content > *:last-child selector, just to make sure we strip it from any element.

comment:4 markjaquith20 months ago

Things are looking good with obenland's patch! Drew, Lance — thoughts?

comment:5 drewstrojny20 months ago

I'm on board with this fix. I didn't consider the background case. This accomplishes the same thing and is clearly more flexible.

@obenland I'm fine using last-child to remove the margin for the last paragraph in the aside posts as well. Good idea!

comment:6 lancewillett20 months ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In [21729]:

Twenty Twelve: better bottom spacing for blockquotes, making it easier for child themes to style blockquotes followed by paragraphs. Props markjaquith and obenland, fixes #21764.

Note: See TracTickets for help on using tickets.