[tailwindcss-typography] Why a margin instead of a padding for paragraphs and other?
#20009
-
|
Currently styles e.g. for I wonder if there is particular reason for that instead of paddings? Paddings will enable us to do What about margins? Is there a sane way to configure |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
I would think margins are used for margin collapsing. There is no single configuration flag to convert all margins to paddings, but you can customize the CSS. |
Beta Was this translation helpful? Give feedback.
-
|
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 typography: {
DEFAULT: {
css: {
p: { marginTop: 0, marginBottom: 0, paddingTop: '0.5em', paddingBottom: '0.5em' },
},
},
}Halve the values to compensate for the lost collapsing, otherwise the spacing between adjacent prose elements will look bloated. For background-clip specifically you might get further wrapping the target in its own element with padding rather than rewriting the whole prose ruleset. |
Beta Was this translation helpful? Give feedback.
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
cssobject on top of the defaults:Halve the values to compensate for the lost collapsi…