Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Estilo entre divs

Olá,

Tenho uma dúvida que ainda não achei uma solução satisfatória

Tendo 3 divs, gostaria de um CSS para inserir espaçamento entre elas, mas não nas bordas externa.

Por exemplo, deveria ficar assim: <div>( )<div>( )<div>

E não ( )<div>( )<div>( )<div>( ) ou <div>( )<div>( )<div>( )

Também não desejo usar flex.

6 respostas

Olá Naun, tudo bem?

Se as suas divs estão posicionadas uma ao lado da outra, você poderia aplicar um espaçamento somente na div do meio.

Ou seja, a div central teria um espaçamento definido para esquerda e direita, dessa forma, o resultado seria o que você deseja.

Abraços!

Olá, obrigado pela resposta, mas na verdade o exemplo foi genérico. Eu queria uma solução para n divs lado a lado ou uma abaixo da outra.

Olá Naun, tudo bem? Bom, você poderia usar margin pra resolver seu problema, como por exemplo:

<div></div>
<div class="caixa"></div>
<div></div>

div{
    display: inline;
}
.caixa{
    margin:  0 25%;
}

Entretanto, não ficaria responsivo. Logo, a melhor solução seria usar um flexbox mesmo.

solução!

Oi Naun,

Entendi agora.

Existem algumas formas de solucionar isso, vou deixar duas abaixo para você:

1 - Apenas divs precedidas de div serão estilizadas.

div + div {
    margin-left: 10px;
}

2 - Utilização de uma pseudo-classe CSS3

div {
    margin: 0 10px;
}

div:first-of-type {
    margin-left: 0;
}

div:last-of-type {
    margin-right: 0;

Provavelmente existem outras soluções. Como sabemos, existem diversas formas de resolver um mesmo problema.

Acredito que com esses dois exemplos você terá um caminho bom para seguir, adote um e utilize.

Espero que seja isso que busca.

Abraços!

Perfeito Paulo, muito obrigado. Era isso mesmo que eu desejava.

Fico feliz em ajudar!

Estou fechando o tópico agora! Qualquer nova dúvida basta criar uma nova thread!

Abraços!