Search code examples
htmlcsslistspace

make list element blocks with space CSS

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>

Solution

  • Add margin around the lists,

    li { margin: 4px; }