• Eliot SlevinEliot Slevin, over 3 years ago

    I made a css framework for a company once, and came to a similar solution. When looking at the grid system, I realised I had to pick either one option.

    1 - Content provides it's own spacing. 2 - Wrapper provides the spacing. 3 - Both provide spacing.

    This article votes for option 3, but they are mainly using padding. The solution I chose for was 2.

    • All items have their own margin
    • Wrappers provide nothing but layout.

    Margin has this little known property of collapsing - say you have 2 divs next to each other with 50px margin each - they will be spaced 50px apart, not 100. This means you don't need to have padding on your wrapper as well.

    This means the wrappers can only focus on layout. If you say a wrapper is 70% of the screen it's just that, no need to worry about padding or margin affecting it.

    2 points
    • Samantha ZhangSamantha Zhang, over 3 years ago

      Hi Eliot, I'm the author of the article there.

      I think we are basically finding the same solution. The only difference is just I chose padding over margin. My reason there was margin only stack vertically and padding would make the framework more consistent in both axis.

      That said, if margin worked for you, that's great, too. Glad we found similar solutions :)

      2 points
    • Mark Otto, over 3 years ago

      Just for reference, since I've seen others get burned by this: not all margins collapse. By default, only vertical margins will collapse, unless there's a new block formatting context. Horizontal margins do not collapse.

      Threw together a quick demo: https://output.jsbin.com/leboge.

      2 points