Espaçamento entre imagens na vertical?

[Fábio BN 17]

Oi Pessoal.

 

Tem uma DIV com duas imagens.

 <DIV class="caixa_categoria_publicidade"><a href="www.link1.com.br" target="_blank"><img src="imagem1.jpg" width="180" height="73" border="0"></a><a href="www.link2.com.br" target="_blank"><img src="imagem2.jpg" width="180" height="73" border="0"></a></DIV>

E a CSS assim:

div.caixa_categoria_publicidade{border-radius:0px 0px 8px 8px; background:#f1f1f1; border:solid 2px #6394CE;margin-bottom:3px;margin-left:3px;padding:5px;}

Eu preciso deixar uma imagem em baixo da outra. Isso já acontece. Porém quando eu não coloco <br> as imagem ficam muito coladas, e se eu coloco <br> o espaço da linha entra as duas imagens grande demais, como conseguir um meio termo na distância entre as linhas das imagens? Uma vez que o <br> pula uma linha e o espaço fica grande demais e no meu site a estética fica feia.

Agradeço a ajuda.

Fábio!

 

[reebr 94]

Não use <br>.

 

Coloque um limite na largura da div contendo a classe '.caixa_categoria_publicidade'. Exemplo: 200px.

 

Só com isso uma imagem ficará embaixo da outra. E para dar uma distancia você pode fazer assim:

div.caixa_categoria_publicidade a:first-child img {
    margin-bottom: 8px; /* exemplo */
}

http://jsfiddle.net/rnxn/6k851oru/

[Fábio BN 17]

Oi. Como a DIV mãe já tem largura, a DIV interna terá a largura da DIV mãe.

Tentei definir uma altura para a DIV, mas mesmo assim as imagem ficam coladas uma na outra!

 

E quando eu uso o comando ( a:first-child img ) ele até dá um espaçamento, mas a imagem de baixo fica fora da minha DIV que possui bordas, teria que ficar as duas imagens dentro da DIV.

 

Precisaria de algum comando que desse um espaçamento semelhante ao espaçamento entre linhas de um texto, mas que fosse aplicado para imagens!

 

Abraços!

[Fábio BN 17]

OI.

 

Resolvi assim:

Como minha DIV tinha um Padding de 5px. Eu retirei 3px do Padding da DIV e coloquei a imagem com padding de 3px.

div.caixa_categoria_publicidade {border-radius:0px 8px 0px 8px; background:#f1f1f1; border:solid 2px #6394CE;margin-bottom:3px;margin-left:3px; padding:2px;}
div.caixa_categoria_publicidade img {padding:3px;}

Dessa forma, as imagem ficaram com um espaçamento entre elas de 3px, e juntando o padding da DIV de 2px + o Padding total de 5px da borda da DIV. agora o alinhamento ficou perfeito entyre as imagens e as bordas da DIV.

Abraços! - Fábio!