Question

当我显示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"/>

Answer 1

默认情况下，图片会产生差距，您可以使用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/

Answer 2

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"/>

Working Fiddle

内联块img元素在开始新行时有差距吗？

2 个答案: