CODEWITHSUNDEEP
htmlcssimage
André Sá
André Sá

Reputation: 47

Adding space between images?

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

Upvotes: 1

Views: 92

Answers (5)

Ahmed
Ahmed

Reputation: 525

try

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

or

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

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

You can just use CSS like so:

img{
    margin-right: 10px;
}

JSFiddle here

Upvotes: 0

m4n0
m4n0

Reputation: 32275

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>

Upvotes: 2

Oriol
Oriol

Reputation: 288130

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>

Upvotes: 0

Emre T&#252;rkiş
Emre T&#252;rkiş

Reputation: 1002

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

Upvotes: 0

Related Questions