make list element blocks with space CSS

user_14326280 0
Viewed 297

I want to make seperate blocks with spaces out of elements of a list. Currently there is no distance between the elements and I cant build my needed blocks. I attached an image to show what I mean.

What do I need to do in CSS?

enter image description here

li {
  float: left;
  border: 3px solid grey;
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

space list css html
3 Answers

Add margin around the lists,

li { margin: 4px; }

user_29137230 

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  border: 1px solid black;
  margin: 10px;
}
<ul>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>

</ul>

Your HTML is invalid. li should replace p tags. Try flex for this purpose. You can use margin as well with your existing code.

With margin:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  border: 1px solid black;
  margin: 10px;
  float: left;
}
<ul>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>

</ul>

user_20000510

Use CSS grid

ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  justify-content:center;
  gap: 15px;
  list-style:none;
}

li {
 border:1px solid;
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

user_147597950
Related