This is a bad design to begin with. And I'd argue that your solution isn't much better:
&>*{margin:20px;}
You'll inevitably run into the problem of collapsing margins with both top and bottom set to 20px.
Better solution: Use unidirectional margins, consistently applying a margin to either the top or bottom of all elements (but not both). I prefer bottom margins. This means my spacing flows consistently from the top down.
Why introduce unnecessary complexity, though? You could just as well do 0 20px 20px 0 and have unidirectional flow, or margin-bottom: 20px, or only margin-top: 20px. You're creating problems for yourself that could be avoided altogether.
Because it is not a real world scenario. The whole point of this pattern is to enforce a consistent spacing between members of a container. If one element requires different spacing than others, then your hierarchy of elements is off. I will update article to make this more clear.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
You bring this up as an example of what one would be inclined to do as a first pass:
This is a bad design to begin with. And I'd argue that your solution isn't much better:
You'll inevitably run into the problem of collapsing margins with both top and bottom set to
20px.Better solution: Use unidirectional margins, consistently applying a margin to either the top or bottom of all elements (but not both). I prefer bottom margins. This means my spacing flows consistently from the top down.
Use negative margin as is illustrated in one of the examples.
Why introduce unnecessary complexity, though? You could just as well do
0 20px 20px 0and have unidirectional flow, ormargin-bottom: 20px, or onlymargin-top: 20px. You're creating problems for yourself that could be avoided altogether.Because it is not a real world scenario. The whole point of this pattern is to enforce a consistent spacing between members of a container. If one element requires different spacing than others, then your hierarchy of elements is off. I will update article to make this more clear.