Bom dia,
Coloquei as tags
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Bom dia,
Coloquei as tags
Oi Matheus,
Esse espaço é causado por espaços no seu HTML. Se você faz o código indentado (o que é bom) infelizmente vai sofrer com isso.
Existem várias soluções para isso, vou te apresentar algumas.
A solução mais simples é deixar seu código todo inline, dessa maneira
<style>
li {
background-color: yellow; /* apenas para efeitos visuais */
list-style-type: none;
display: inline;
}
</style>
<ul>
<li>item 01</li><li>item 02</li><li>item 03</li><li>item 04</li>
</ul>Assim os espaços vão desaparecer. Porém isso traz uma série de problemas!
Seu código fica difícil de ler, difícil de entender, difícil de modificar, difícil de dar manutenção e difícil de melhorar.
Imagine dar manutenção em um código que está todo em uma linha só!
A segunda solução é setar o font-size do elemento pai para zero e controlar o font-size do elemento em si manualmente.
<style>
ul {
font-size: 0;
}
li {
background-color: yellow; /* apenas para efeitos visuais */
list-style-type: none;
display: inline;
font-size: 15px;
}
</style>
<ul>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
<li>item 04</li>
</ul>Nessa terceira solução, basta setar um margin-left negativo de 4px (pode mudar dependendo do font-size do elemento pai, e também tem alguns bugs nos IE's da vida)
<style>
li {
background-color: yellow; /* apenas para efeitos visuais */
list-style-type: none;
display: inline;
margin-left: -4px;
}
</style>
<ul>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
<li>item 04</li>
</ul>A quarta solução é simplesmente flutuar os elementos para a esquerda ou direita, assim eles perdem este espaçamento. Porém, isso nem sempre é a melhor solução, pois as vezes você não deseja ter um menu flutuado a esquerda ou a direita, não é mesmo?
<style>
ul {
overflow: hidden; /* apenas para evitar o height 0 causado pelo float */
}
li {
background-color: yellow; /* apenas para efeitos visuais */
list-style-type: none;
display: inline;
float: left;
}
</style>
<ul>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
<li>item 04</li>
</ul>Quinta e última solução, é usar flexbox!
<style>
ul {
display: flex;
}
li {
background-color: yellow; /* apenas para efeitos visuais */
list-style-type: none;
}
</style>
<ul>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
<li>item 04</li>
</ul>Na minha opinião pessoal essa é a melhor solução, porém o flex não é 100% aceito pelos browsers, então cabe a você decidir se vai dar suporte a todos os navegadores ou não.