PodeEste espaçamento ocorre porque os elementos com inline-block
faz com que espaçamentos de quebra de linhas ou espaços normais afetem a renderização, já que este é o efeito esperado da propriedades que usam inline
(como inline-block
e inline-table
)
Para corrigir você pode usar float:;
e clear
com um "pseudo elemento" "pseudo elemento" (::after
):
.itens {
list-style-type: none;
padding: 0;
margin: 0;
}
.itens > li {
float: left;
padding: 20px;
background: red;
}
.itens::after {
clear:both;
content: "";
display: block;
}
<ul class="itens">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ou definir a fontefont-size
como 00
no ulul
:
.itens {
font-size: 0;
list-style-type: none;
padding: 0;
margin: 0;
}
.itens > li {
display: inline-block;
padding: 20px;
background: red;
font-size: 11pt;
}
<ul class="itens">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Para ver como é as quebras de linha que afetam remova qualquer espaço entre os LIs:
.itens {
list-style-type: none;
padding: 0;
margin: 0;
}
.itens > li {
display: inline-block;
padding: 20px;
background: red;
font-size: 11pt;
}
<ul class="itens">
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>