Nowadays, CSS has a wide range of tools and properties that allow designs that, until a few years ago, seemed impossible to implement. Many develop...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Maybe it’s worth mentioning that
gapis short forcolumn-gapandrow-gap. Use them individually for finer control. A quick, row-based grid can be as simple as:In addition, gap is no longer exclusive to grid, can also be used for flexbox as well
It's a good post, and something for consideration indeed. It somehow goes against my intuition in, for instance, the flow of paragraphs in a document, though. It feels natural to define distance between paragraphs with margin.
You claim that "The responsibility lies within the parent block." but I fail to see a good justification for this. Why should the responsibility rest on the parent element? I guess this is a rule you have made following practical observations?
If you just apply margins to child elements, you'll end up with an extra margin in the last element. To avoid that, you may use the lobotomized owl selector to select only those that have siblings, eg:
* + *or use the:notselector, eg:.element > *:not(:last-child), or even worse - redefine the last element's margin with an class or!importantfurther in the code.This seems like added complexity to me, if you want to achieve a similar result to
gap.I agree that if what you want to achieve is
gap, you should just usegap. :)If you were to replace a paragraph with a new one or another, the margin separating it from the rest should still be there, right?
If that's the case, the margin will remain independent of the paragraphs it separates, so, from my point of view, it should be the parent that separates them.
The paragraph spacing exists due to the layout that displays them (the parent).
Flexbox supports gap, too. It is not too complex and works most of the time.
CSS Grid is better for complex layouts. But that doesn't mean you could use it for simple layouts, too.
Margin: auto; works fine when the container has a limited width. This can be archived now with almost the same lines of CSS code with grid. And then you get that additional superpower layout tool.
About gap: you can use different gaps for the children. There are now less reasons to use margin for layouts.
About the negative margin, Bootstrap has a use case!
In the
rowelement, Bootstrap uses negative margins to adjust the outer elements additional horizontal spacing due to the.containerclass horizontal padding.Thanks for the great post, its definitely something that comes to mind often when creating layouts, back in the day it was quite a bit more difficult without flexbox and grid.
How would you classify a case where we set all children to have a certain margin but from within the parent selector like so:
Would the above still be classified as the child interfering with what should only be on the parent to set.
Thanks!
Hi! I'm not quite sure about the purpose of that padding. I understand it could be for two reasons:
If that
padding-bottomis meant to separate the children from each other, you should remove the padding from the last child so that it doesn't add extra space after it. In this case, I would opt for using thegapproperty in the grid layout.If you simply want to add padding to the children (whether it's bottom, top, right, or left), I would suggest adding that padding directly to the children, like this:
If you are using the
.childclass for other elements and only want the ones inside the parent to have this padding, you can separate the styles into two different classes: one for those inside the parent and another for those that aren't.You may think that, with this approach, you would have duplicated styles. That's why I love using styled-components, because it allows you to create styles through composition. Here's an example:
Personally, I'm not a big fan of nesting styles. It's just an opinion.
I hope I've answered your question. Thanks a lot for the feedback :)
For your sibling example I would argue that grid is overkill and margin is a better approach. Especially if you need different spacing between the siblings, margin collapse is a benefit.
grid is a wonderful thing for actually creating grid layouts, and in that context the above solution makes sense. But for simpler/smaller content
margin-collapseis a more compact and saner approach, especially since both grid layouts andmargin-collapseend up calling the same 'first/last element' check function in the renderer. This isn't like deprecatingfloat:because it introduced more complexity to use it than later solutions.You can still use
gapand add spacing where needed, the element will offset normally. Also, can't see grid as an overkill since it's mor extensible, reliable and robust API. Nothing better to avoid creating additional media queries just to redefine absolute margins in mobile viewports.Between parent and child, sure. But what about when some siblings should be spaced differently than others? This is very common, and gap doesn't cut it.
I used this way to keep document harmonic flow.
Just like that!
Paddings are not always applicable either. It heavily depends on the design and the page structure.
Opt for padding over margin in CSS for cleaner, more efficient code. This is crucial advice, especially for app development company striving for seamless UI/UX!
One annoying thing with gap is that it adds around elements with display:none as well. Is there another solution except adding the margins to the children in these cases?
Slay