Bootstrap: Padding & margins inconsistent between Bootstrap Elements

[timnicholson]

I'd like to better understand whether the existing v4 margin and padding classes as well as hx, p, etc. elements are going to remain the same or be adjusted at some point. The reason I ask is because it's practically impossible to get a content section with equal whitespace if a user is allowed to make any determination of which tags get used. This was the case with v3 as well. I'd love to see some consistency or at least better understand the reasoning behind these things.

In v4, it looks like the following is the case:

• h1-h6 tags have their top-margin removed altogether. Is the assumption that each developer will set their own margins in their project? I can't imagine not wanting any top margin on hx tags, although I'd prefer they were consistent across all hx tags.
• h1-h3? tags have 8px bottom margin while p tags have 16px bottom margin. What is the reasoning on this? Wouldn't it be better to have them the same? 8px is pretty short and 16px is pretty tall.
• The new padding and margin classes end up being 16px, 32px, and 48px. Those don't align with the bottom margins above.

So there is no way to get a content area with equal whitespace on all sides without completely overriding everything.

In addition, containers and rows have 15px of whitespace, but gutter margins are 35px (although I get this probably has more to do with math than for the above items). Regardless, it really complicates things with trying to get consistent horizontal and vertical spacing.

In v3, things were/are still out of alignment:

• h1-h3 tags have a top-margin of 22px and a bottom margin of 11px.
• h4-h6 tags have a top-margin of 11px and a bottom margin of 11px.
• p tags have a bottom margin of 11px.

Let me provide an example. Let's say we just want equal top and bottom "whitespace". We'll forget about horizontal space for now. The new margin and padding classes don't allow us to deal with the 8px bottom margin of hx tags at all.

I haven't completely thought through the perfect answer for this. Probably something like all hx tags having 16px top margin and 8px margin. Have all p and other tags have 8px bottom margin (or at least some consistent value). That way we could at least adjust the bottom whitespace of the div itself to get an even 16px on top and bottom. Of course we could then increase the whitespace on all sides of the div to get to other multiples, like 32px.

At any rate, I figured you guys were either still thinking this through and open to changes or had a really good explanation for why the values are set the way they are.

[timnicholson]

Sorry, quick correction: BSv4a2 sets p-*-2 at 1.5rems which is 24px. But the discussion remains the same. Why not 8px, 16px, 24px (and up) or 16px, 32px, 48px? If BS3.x had padding and margins, I would think it should have been 11px, 22px, and 33px based on the hx and p tag margins.

[guylepage3]

I believe this has been dealt with here. https://github.com/twbs/bootstrap/issues/18490

[cvrebert]

@guylepage3 I'd say that issue is a tad different since it was only regarding utility classes.

CC: @mdo

[timnicholson]

Correct, my request / question isn't about responsive classes at all. I had read that other post. I'm not asking for any lines of CSS to be added. I'm just hoping to get the existing padding and margin classes to align with the basic element margins (hx, p, etc.) or vice versa. People are going to need to be able to line up their content in columns easily and have content blocks with equal whitespace on them.

[cvrebert]

h1-h6 tags have their top-margin removed altogether. Is the assumption that each developer will set their own margins in their project? I can't imagine not wanting any top margin on hx tags, although I'd prefer they were consistent across all hx tags.

v4-dev/scss/_reboot.scss:

We nuke the top margin [of <h1>-<h6>] for easier control within type scales as it avoids margin collapsing.

[timnicholson]

Ok, so I understand from this article what you are talking about with collapsing margins. This article provides a very simple way to deal with it in a consistent fashion. In a nutshell, either always use top margin or bottom margin, never both. But the key to it is that those margins need to be consistent across all elements. Since it appears that you prefer to use bottom margin, then bottom margin should always be 8px or 16px, not a mixture with hx tags have 8px and p tags having 16px. Or something in between like 12px would probably be better as visually 8px is a bit too small and 16px is a bit too large. But I'm not really trying to say what it should be, I'm simply asking for it to be consistent.

So to lay out one possible scenario:

• font base = 16px (this is what v4 has)
• line spacing = 1.5 (this is what v4 has)
• bottom margin = 12px (v4 mixes 8px and 16px)
• padding and margin classes: _-_-1 = 12px; _-_-2 = 24px; _-_-3 = 36px (v4 is 16px, 24px, and 48px)

So to get, let's say 24px equal whitespace on any column, regardless of what html tag they start with or end with... we can simply set padding: 24px 24px 12px 24px. No extremely complicated CSS is needed to try to determine what the first-child and last-child are to try to adjust the padding.

I suggest making the padding and margin classes align with the element margins, so that people can also use those to alter the whitespace and keep it equal if they want while just using the built-in classes. So for example if they want 36px equal whitespace on all sides, they can use: p-x-3 p-t-3 p-b-2.

[timnicholson]

Here is the article reference: Single-direction margin declarations

[willthemoor]

Think the defaults are looking good but I've definitely run into the vertical rhythm situation described above. Can we add two new variables for the margin-bottoms in the reboot that default to 1rem and 0.5rem?

[LeftPinkie]

Can anyone enumerate which elements / classes can utilize the spacing classes? I've tried .m-*-0 and .p-*-0 on the .col-*-* but it does not have any effect.

[sbaechler]

The margin-bottoms should actually use the $spacer-y setting to allow a consistent vertical spacing.

[guylepage3]

So for example if they want 36px equal whitespace on all sides, they can use: p-x-3 p-t-3 p-b-2.

@timnicholson I really like this idea.

[mdo]

Closing since there are no planned changes here and spacer utilities provide a good level of control for changing the defaults.