Adding space between images?

André Sá Published at Dev

André Sá

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

m4n0

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.