Question

我更喜欢使用img display:block，因为页面不会使用图像下的额外空白像素进行渲染。但是我注意到这会产生奇怪的结果。如果我在附加到display:block中大于图片的链接的图片上使用DIV，则整个DIV会成为链接。

这是我的jsfiddle示例：https://jsfiddle.net/j42Ln4g8/1/

我是否错误地使用display:block或者是否有一种优雅的方法来解决这个问题？我知道我可以使用与图像尺寸相同的内部包装DIV来解决这个问题，但我认为可能有更聪明的方法。

HTML

<div class="image_holder">
  <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a>
</div>

<div class="image_holder2">
  <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a>
</div>

CSS

.image_holder {
  margin:20px 0px;
  background-color: aquamarine;
}

.image_holder img {
  display: block;
}

.image_holder2 {
  margin:20px 0px;
  background-color: aquamarine;
}

.image_holder2 img {
  display: inline-block;
}

Answer 1

块元素强制换行并获取其父元素的整个宽度。它不允许其他元素左右移动。

在您的代码上使用display:inline-block;，在display:block;上使用img。这样就不存在page not rendering with extra blank pixels under images.的问题，而你的整个div不会成为一个链接。

编辑：将vertical-align:bottom;添加到a标记。正如Oriol

所建议的那样

＆＃13;

.image_holder {
  margin:20px 0px;
  background-color: aquamarine;
}
.image_holder a{
  display:inline-block;
  vertical-align:bottom;
}
.image_holder img{
  display:block;
}

.image_holder2 {
  margin:20px 0px;
  background-color: aquamarine;
}

.image_holder2 img {
  display: inline-block;
}

＆＃13;

<div class="image_holder">
  <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a>
</div>


<div class="image_holder2">
  <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a>
</div>

＆＃13;

Answer 2

块级元素默认占用其容器的100％宽度，因此可以预期这种行为。摆脱图像后显示的空间的方法是将font-size: 0;设置为父级，因为它创建了该空间的图像周围的空间，因为内嵌元素周围保留了空白区域

你也可以浮动元素，然后清除父元素。

这是两种技术的例子。

＆＃13;

.image_holder {
  margin:20px 0px;
  background-color: aquamarine;
  overflow: auto;
}

.image_holder img {
  float: left
}

.image_holder2 {
  margin:20px 0px;
  background-color: aquamarine;
  font-size: 0;
}

.image_holder2 img {
  display: inline-block;
}

＆＃13;

<div class="image_holder">
  <a href=""><img src="http://imgur.com/a/hf7jx" width="180" height="200"></a>
</div>

<div class="image_holder2">
  <a href=""><img src="http://imgur.com/a/hf7jx" width="180" height="200"></a>
</div>

＆＃13;

奇怪的行为 - img display：block vs img display：inline-block

2 个答案: