内联块img元素在开始新线时有差距吗？ [英]inline-block img elemets have a gap when start a new line?

when I display img inline-block.but there is a gap between the first line and the second !! below is the sample, picture1 and picture3 have a gap?I dont't want the gap..so help me..

当我显示img inline-block时。但是第一行和第二行之间存在差距!!下面是样本,picture1和picture3有差距吗?我不想要差距..所以帮帮我..

img {
  display:inline-block;
  width:200px;
  background-color:#ccc;
  border:5px solid red;
  padding:10px;
  text-align:center;
  margin:0px;
}
<img alt="picture1"/><img alt="picture2"/><img alt="picture3"/><img alt="picture4"/>
2 个解决方案
#1
0  

Images make a gap by default, you can fix that using vertical-align

默认情况下,图像会产生间隙,您可以使用vertical-align来修复它

img {
    display: inline-block;
    width: 200px;
    background-color: #ccc;
    border: 5px solid red;
    padding: 10px;
    text-align: center;
    margin: 0px;
    vertical-align: middle;
}
http://jsfiddle.net/opz672zn/

#2
0  

vertical-align may help you to fix the issue.

vertical-align可以帮助您解决问题。

img {
  display:inline-block;
  width:200px;
  background-color:#ccc;
  border:5px solid red;
  padding:10px;
  text-align:center;
  margin:0px;
  vertical-align: top; <!--Added-->
}
<img alt="picture1"/><img alt="picture2"/><img alt="picture3"/><img alt="picture4"/>