4 items - 25% each - with border and margin

Question

So, I searched the Internet and found problems that are a bit similar, but not exactly the same.

I have a list that I want to show in the form of a table, and I want to use the entire width of the parent DIV in (so 100%). I want to show 4 elements in a row and use something like thias:

ul.li{
 list-style-type: none;
 float: left;
 display: box;
 border: 1px solid black;
 margin: 5px;
 padding: 10px;
 width: 25%
}

You don’t have to be a mathematician to see what’s wrong here: 25% * 4 - 100, but plus border and margin, the total amount exceeds 100. Thus, the result is only 3 list items per line, and a lot under the total width of the parent div

I tried using a table instead of list items, it’s a little easier to get the exact 100 percent width, but it doesn’t work for the rest of my page, since it is not so flexible, it’s just not what I need.

, , () .

Answer 1

1) box-sizing: border-box;, width height ( min/max) , , , .

2) width: calc(25% - 10px); margin:5px, 10px (margin-left:5) and (margin-right:5) : 25%.

ul li{
 box-sizing: border-box;
 list-style-type: none;
 border: 1px solid black;
 float: left;
 margin: 5px;
 padding: 10px;
 width: calc(25% - 10px);
}

ul li{
 box-sizing: border-box;
 list-style-type: none;
 border: 1px solid black;
 float: left;
 margin: 5px;
 padding: 10px;
 width: calc(25% - 10px);
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Hide result

Answer 2

: width: calc(25% - 30px)

Answer 3

flex ( css-tricks.com). flex, , . , flex-basis. border-box ( ) + , li, , , 25% + 20px, 25% 20px, ?

DEMO

<ul class="list">
  <li class="list__item">1</li>
  <li class="list__item">2</li>
  <li class="list__item">3</li>
  <li class="list__item">4</li>
</ul>

.list {
  display: flex;
  width: 100%;
  background-color: lightcoral;
  justify-content: center;
  align-content: center;
}

.list__item {
  list-style-type: none;
  box-sizing: border-box;
  display: block;
  border: 1px solid black;
  margin: 5px;
  padding: 10px;
  flex-basis: 25%
}

Answer 4

ul{
 list-style-type: none;
 margin: 5px;
 padding: 10px;
}
ul li{
 list-style-type: none;
 float: left;
 display: box;
 border: 1px solid black;
 margin: 5px;
 padding: 10px;
 width: 25%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Hide result