negative margins about css-protips

[albertorestifo]

Plenty of times I've used this trick when creating grids

[neworldwebsites]

Congrat

[vikrantnegi]

Nice.

[alexcarpenter]

or you could simplify it to be:

.navigation {
  display: flex;
}

.navigation li:not(:first-of-type) {
  margin-right: 1rem;
}

[marcobiedermann]

@alexcarpenter
This is not the same:

Your example might work items which are only placed in a row.
It does not work with a grid like layout (rows & cols).
With negative margins you can cut of the gutter on all edges (top, right, bottom, left).
Great for a multi line image gallery or products page

[manfromanotherland]

I think we could also use the adjacent selector – that's what I end up doing in most cases:

.nav li      { display: inline-block; }
.nav li + li { margin-left: 1rem; }

Supported in every browser too!

[marcobiedermann]

@EdmundoJr As mentioned this only would work in one direction. Horizontally or vertically.

Using negative margins will solve the problem with space between all items equally. No matter which direction (inline or stacked).

[marcobiedermann]

Maybe this example will clear some things up: https://jsfiddle.net/marcobiedermann/yjL5qf0b/

<div class="outline">
  <ul class="items">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

.outline {
  border: 1px solid blue;
}

.items {
  display: flex;
  flex-wrap: wrap; 
  list-style: none;
  margin: -0.5rem;
  overflow: hidden;
  padding: 0;
}

.item {
  background-color: tomato;
  flex-basis: calc(33.33% - 1rem);
  margin: 0.5rem;
  min-height: calc(100vw / 3 - 1rem);
}