Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Display inline-block

por José Campelo
| 188.5k xp | 34 posts

Se eu tenho dois elementos com 50% de largura porque eles não ficam um do lado do outro em uma página que possui 100%?

<div class="item primeiro-item">
    <p>Primeiro</p>
 </div>

<div class="item segundo-item">
    <p>Segundo</p>
</div>
.item{
    width: 50%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-family: sans-serif;
    color: #000000;
    display: inline-block;
    box-sizing: border-box;
}

.primeiro-item{
    background: green;
}

.segundo-item{
    background: blueviolet;
}
4 respostas
por José Campelo
| 188.5k xp | 34 posts

Se eu colocar as duas div na mesma linha os dois elementos ficam um do lado do outro no navegador. Por algum motivo o navegador entende que as div tem uma barra de espaço se eu indentar o código, fazendo meu elemento ter mais de 50% por causa da barra de espaço... Qual é o motivo disso?

<div class="item primeiro-item"><p>Primeiro</p></div><div class="item segundo-item"><p>Segundo</p></div>
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai José, tudo bem? Isso acontece porque o browser entende que existe um "espaço em branco" entre os elementos, se você baixar de 50% para 49.5% vai ver que eles já ficam lado à lado.

Porém, existe um hack para "remover" essa "espaço em branco":

<div class="item primeiro-item">
    <p>Primeiro</p>
</div><!--
--><div class="item segundo-item">
    <p>Segundo</p>
</div>

Você adiciona um comentário, ele deve começar no final da linha de cima e terminar no começo da linha de baixo.

Ou você pode calcular os 50% de width levando esse espaço em branco em consideração:

width: calc(50% - 2px);

Espero ter ajudado.

por José Campelo
| 188.5k xp | 34 posts

Que legal, não sabia disso... Muito obrigado amigo, você é um amigo

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Magina José, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.