在图像之间添加空间?

时间:2015-07-03 11:53:49

标签: html css image

我有这个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>

这个CSS:

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

我希望这些图像之间有空格,但我很难这样做(这可能很愚蠢......我只是愚蠢)。

编辑:或者甚至将它们间隔在那些950px

5 个答案:

答案 0 :(得分:2)

由于您需要它们之间的空间,如果当前图像之后只有图像,您可以使用+兄弟选择器来定位图像边距。

#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>

答案 1 :(得分:0)

添加此css

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

这将把它们从左到右置于barraLinhas之下,它们之间有10px的空间

答案 2 :(得分:0)

您可以使用flexbox:

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

&#13;
&#13;
#barraLinhas {
  width: 950px;
  height: 50px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

您可以像这样使用CSS:

img{
    margin-right: 10px;
}

JSFiddle here

答案 4 :(得分:0)

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

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