CODEWITHSUNDEEP
htmlcss
SimpleJ
SimpleJ

Reputation: 14768

First `li` element in second `ul` column has no margin?

I'm trying to add a top margin to every li element in a ul element that has the css property column-count: 2 set. For some reason, the margin works for every li element except the first element in the second column:

ul {
  column-count: 2;
  padding: 0;
  border: 1px solid black;
}

li {
  margin-top: 10px;
}

li:nth-child(1) {
  background-color: red;
}

li:nth-child(5) {
  background-color: blue;
}
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Upvotes: 1

Views: 1218

Answers (3)

j08691
j08691

Reputation: 207901

You could set the display property of the list items to inline-block and the width to 100% to remedy this

ul {
  column-count: 2;
  padding: 0;
  border: 1px solid black;
}

li {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
}

li:nth-child(1) {
  background-color: red;
}

li:nth-child(5) {
  background-color: blue;
}
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Upvotes: 2

jayly
jayly

Reputation: 156

The suggestion @Troels gave is a good option. You can look into padding as an option too:

li {
  padding-bottom: 10px;
}

Upvotes: 0

Troels Lenda
Troels Lenda

Reputation: 524

What about just using margin-bottom instead? Also apply 10px padding to your ul in order to achieve the same.

ul {
  column-count: 2;
  padding: 10px 0 0 0;
  border: 1px solid black;
}

li {
  margin-bottom: 10px;
}

li:nth-child(1) {
  background-color: red;
}

li:nth-child(5) {
  background-color: blue;
}
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Upvotes: 4

Related Questions