<a> elements</a>之间的空格

时间:2014-10-05 17:21:01

标签: html css

为什么图片之间有空格? http://jsfiddle.net/dasmus/6Ltrs9tw/

CSS

.gallery{
width:900px;
height:640px;
}
a{
display:inline-block;
}

a img{
width:200px;
height:141px;
}

HTML

<div class="gallery">
    <a ><img src="http://1.1.1.1/bmi/alpatriott.ru/works/album/images/smile.jpg"></a>
    <a ><img src="http://1.1.1.1/bmi/alpatriott.ru/works/album/images/smile.jpg"></a>
    <a ><img src="http://1.1.1.1/bmi/alpatriott.ru/works/album/images/smile.jpg"></a>
    <a ><img src="http://1.1.1.1/bmi/alpatriott.ru/works/album/images/smile.jpg"></a>
</div>

2 个答案:

答案 0 :(得分:1)

因为display: inline-block在元素之间添加了额外的空间。有一些黑客可以解决这个问题,但是如果你想要触摸这些元素,你最好只使用float:left。请务必将overflow:hidden添加到父元素或使用clearfix

JSFIDDLE

答案 1 :(得分:0)

  a{
    display:inline-block;
    float:left; /* added */
  }