在图像之间添加空间？

Question

I have this div:

<div id="barraLinhas">
    <img onclick="linhaAzul()" src="Linha_Azul.png" value="Linha Azul" />
    <img onclick="linhaAmarela()" src="Linha_Amarela.png" value="Linha Amarela" />
    <img onclick="linhaVerde()" src="Linha_Verde.png" value="Linha Verde" />
    <img onclick="linhaVermelha()" src="Linha_Vermelha.png" value="Linha Vermelha" />
</div>

And this CSS:

#barraLinhas {
    width: 950px;
    height: 50px;
    margin-bottom: 10px;
}

And I would like to have those images with spaces between them but I am having trouble doing so (it is probably stupid easy.. I am just being dumb).

EDIT: Or even have them spaced in those 950px

Answer 1

Since you wanted space between them, you can use + sibling selector to target image margin if only a image is present after the current image.

 #barraLinhas { width: 950px; height: 50px; margin-bottom: 10px; } #barraLinhas img + img { margin-left: 15px; } 

 <div id="barraLinhas"> <img onclick="linhaAzul()" src="http://placehold.it/100x100" value="Linha Azul" /> <img onclick="linhaAmarela()" src="http://placehold.it/100x100" value="Linha Amarela" /> <img onclick="linhaVerde()" src="http://placehold.it/100x100" value="Linha Verde" /> <img onclick="linhaVermelha()" src="http://placehold.it/100x100" value="Linha Vermelha" /> </div> 

Answer 2

add this css

#barraLinhas img{
    float: left;
    margin-right: 10px;
}

this will put them under barraLinhas from left to right, with 10px space between them

Answer 3

You can use flexbox:

#barraLinhas {
  display: flex;
  justify-content: space-between;
}

 #barraLinhas { width: 950px; height: 50px; margin-bottom: 10px; display: flex; justify-content: space-between; } 

 <div id="barraLinhas"> <img src="http://placehold.it/100x100" alt="Linha Azul" /> <img src="http://placehold.it/100x100" alt="Linha Amarela" /> <img src="http://placehold.it/100x100" alt="Linha Verde" /> <img src="http://placehold.it/100x100" alt="Linha Vermelha" /> </div> 

Answer 4

You can just use CSS like so:

img{
    margin-right: 10px;
}

JSFiddle here

Answer 5

try

#barraLinhas img:not(:first-child){
    margin-left: 5px;
}

or

#barraLinhas img:nth-child(n+2){
    margin-left: 5px;
}