Qual é o caminho certo para definir o estilo das imagens dentro da minha galeria div?
Pergunta
Eu tenho uma div com um id 'galeria' e eu quero estilo as imagens dentro dela. Especificamente, eu quero dar cada uma das imagens uma borda amarela 1px solid exceto no fundo porque eles se sentam em cima uns dos outros, então eu não quero dobrar a fronteira na parte inferior.
O que eu estou confuso sobre é como escolher entre os diferentes elementos de estilo fronteira: beira, border-style, border-width. Eu tentei isso:
div#gallery img
{
border-width:1px;
border-style:solid;
border: solid yellow;
border: 1px 1px 0px 1px;
}
Eu consegui obter uma borda amarela com este css acima, mas a fronteira parece mais uma fronteira 2px - é muito grosso - e, além disso, a sintaxe que estou usando não parece muito elegante.
Qualquer recomendações sobre como fazer isso de forma mais concisa / elegantemente?
Solução
Eu acho que essa é a melhor maneira:
border: 1px solid yellow;
border-bottom: none;
A sintaxe para a declaração border
vai width style color
e afeta todas as quatro bordas. Depois disso, você pode substituir a parte de trás inferior ao uso de nenhuma borda declarando border-bottom
como nenhum.
Outras dicas
Eu realmente não sei se há uma maneira errada de fazê-lo, mas você tem basicamente 3 métodos para fazê-lo:
Método 1
border-top: 1px solid yellow;
border-right: 1px solid yellow;
border-left: 1px solid yellow;
Método 2
border: 1px solid yellow;
border-bottom: 0;
Método 2
border: 1px solid yellow;
border-bottom: none;
Eu preferiria qualquer método 2 ou o método 3.
(eu sei o método 2 e método 3 são basicamente o mesmo, mas eu queria dar a ambas as soluções, assim você pode escolher o que você gosta, "none" ou "0").