Skip to content
Discussion options

You must be logged in to vote

Margin collapsing is the reason. When two paragraphs sit next to each other vertically, their adjacent margins collapse into one, so you get a single 16px gap, not 32px. Switch to padding and that collapsing goes away, every element contributes its full top and bottom space, which doubles the rhythm between paragraphs, headings, lists, etc. That's why the plugin defaults to margins across the board.

You can override it in your config though, the plugin merges your css object on top of the defaults:

typography: {
  DEFAULT: {
    css: {
      p: { marginTop: 0, marginBottom: 0, paddingTop: '0.5em', paddingBottom: '0.5em' },
    },
  },
}

Halve the values to compensate for the lost collapsi…

Replies: 2 comments 1 reply

Comment options

You must be logged in to vote
1 reply
@KazimirPodolski
Comment options

Comment options

You must be logged in to vote
0 replies
Answer selected by KazimirPodolski
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
3 participants