Menu icon Foundation
Why do Foundation buttons have a bottom margin?

I've been using F4 and F5 for a while now on a few different sites and I can't, for the life of me, figure out why Foundation defaults to a bottom margin on buttons... If you put the buttons into a form or a panel, you end up with extra space at the bottom. If you put them in a form next to an input, the button doesn't line up with the input because of the margin. Even in the Foundation docs, nearly every instance of button has the bottom margin overwritten with the exception of the actual "Buttons" page and the buttons at the top of it.

I know you can override that with the _settings.scss file, but what was the thinking behind making the margin a default? I'm not saying it's wrong or bad, but I am struggling to see what I'm missing...

buttonmargindefaultsettingsFoundation 4Foundation 5

I've been using F4 and F5 for a while now on a few different sites and I can't, for the life of me, figure out why Foundation defaults to a bottom margin on buttons... If you put the buttons into a form or a panel, you end up with extra space at the bottom. If you put them in a form next to an input, the button doesn't line up with the input because of the margin. Even in the Foundation docs, nearly every instance of button has the bottom margin overwritten with the exception of the actual "Buttons" page and the buttons at the top of it.

I know you can override that with the _settings.scss file, but what was the thinking behind making the margin a default? I'm not saying it's wrong or bad, but I am struggling to see what I'm missing...

Karl Ward almost 5 years ago

I don't have a straight answer for you but in my opinion, these are just the nature of things, and the result of defining a natural flow to all elements. For example, if I put a button below a paragraph, and then add a new h2 header below it, there might not be any space margin between the button and next paragraph and I would be "wtf why there is no breathing space below that button".

Sometimes as a designer you just gotta create specific classes to neutralize- or add margins/paddings on elements, depending on what context they are in.

Just referring to your specific quote "If you put the buttons into a form or a panel, you end up with extra space at the bottom. If you put them in a form next to an input, the button doesn't line up with the input because of the margin." ... I know Foundation has specific classes for buttons aligned with inputs fields, and also special classes when buttons are added to the topbar.

I'm not disagreeing with you, I'm just saying it might work the other way if margins are missing by default.

Derek Paul almost 5 years ago

Karl:

Foundation's classes for forms only work that way if you collapse the row and put them immediately in line with each other. It doesn't do anything if they're in the same row but not collapsed.

It's just weird because it seems that buttons would be used in forms most often and yet I feel like there's no thought put into buttons within forms. It's a minor frustration, but it's causing a bit of extra work.