gap vs margin

regarding the latest video on gap vs margin at the end there was the spacing between those form-groups would there be a difference (in outcome or styling semantics) if instead of
form {
display: grid;
gap: 1em;
}
form {
display: grid;
gap: 1em;
}
it would have been done
.form-group {
margin-block: 1em;
}
.form-group {
margin-block: 1em;
}
because that .form-group selector was already there anyway
6 Replies
denertog
denertog2y ago
or is this the same situation as with the grid of .card selectors earlier in the video? where gap clearly is superior because of a flexible grid etc.
Mannix
Mannix2y ago
you would get spacing between each group but label and input would still be on the same line and that doesn't look good
Wolle
Wolle2y ago
1) gap is only once between elements 2) margin is above and below the specified elements -> with margin you will get spacing above the first and below the last and double the spacing between the elements
Kevin Powell
Kevin Powell2y ago
yeah, @Wolleys nailed it. I don't want margin-top on the first one, or margin-bottom on the last one. I see my form-groups almost like the cards I looked at earlier, but just stacked. It all depends on the context, and I don't want people to avoid gap, just think about which would actually be better suited.
denertog
denertog2y ago
Right, I was thinking it wouldn't be too bad because of the margins collapsing but you'd have to remove it from the first and last as well. Thx for clarifying!
Wolle
Wolle2y ago
Margin collapse, I always forget about that... one more reason for * { display: flex; } 😁 (I'm kidding do not do this.)
Want results from more Discord servers?
Add your server