Skip to main content
adicionou 246 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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>

Pode usar float:; e clear com um "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 fonte como 0 no ul:

.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>

Este 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" (::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 font-size como 0 no ul:

.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>

Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Pode usar float:; e clear com um "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 fonte como 0 no ul:

.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>