Kevin Powell - Community•2y ago

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

denertogOP•2y 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•2y 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•2y 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•2y 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.

denertogOP•2y 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•2y ago

Margin collapse, I always forget about that... one more reason for * { display: flex; } 😁 (I'm kidding do not do this.)

Gaming

Programming

gap vs margin