图像下方的空白[重复]答案

【问题标题】：Whitespace underneath image [duplicate]图像下方的空白[重复]
【发布时间】：2015-04-23 06:25:30
【问题描述】：

我正在将我的网站从固定布局转换为响应式布局，并使用 getskeleton 框架。 http://jsfiddle.net/L2q750xw/1/

 <div class="one-third column">

    <h4>Basic Page</h4>
     <div class="home-box-wrap"><img class="u-max-full-width" src="http://www.aroundtheworldin80jobs.com/wp-content/uploads/2013/09/2013-berlin.jpg"></div>

    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton    documentation</a>.</p>
  </div>
</div>

}.home-box-wrap{
width:100%;
height:0%;
 border:2px solid #ff00ff;
 border-radius: 5px;
 padding:0px;
 }
.u-max-full-width {
 max-width: 100%;
 box-sizing: border-box; }

除了图像下方的空白之外，所有工作都按预期工作，我看不出这是什么原因，并尝试删除填充并调整框高度，它应该都被规范化。

谢谢

【问题讨论】：

标签： html css responsive-design skeleton-css-boilerplate

【解决方案1】：

你基本上有两个选择。

要么将img 元素的vertical-align 属性更改为默认值baseline 以外的值：

Updated Example

.u-max-full-width {
    vertical-align: top;
    max-width: 100%;
    box-sizing: border-box;
}

在某些情况下，您还可以将img 元素的display 从默认值inline 更改为block。

Updated Example

.u-max-full-width {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

至于为什么会这样：

为letters such as f, j, p and q 的inline 元素保留了超出其他字母高度的空白。通过将元素的vertical-align 属性更改为baseline 的默认值以外的other，空格将被删除。通过将元素的display 更改为block，vertical-align 属性不再对元素产生影响，因为它不再是inline。

【讨论】：

加 1 ，很好的答案！
太棒了！谢谢
@tomharrison 如果回答了您的问题，请将答案标记为正确。点击投票下的勾号。

【解决方案2】：

@JoshCrozier 有一个不错的出路！但我想添加一个厚颜无耻的技巧来帮助你。只需在所有 img 元素中添加一个否定的 margin-bottom。

img{
    margin-bottom:-7px;
}

工作小提琴：http://jsfiddle.net/L2q750xw/3/

【讨论】：

这并不总能保证有效，因为空格的数量会因字体大小而异。 See this example 这本质上是一个 hack。为什么-7px？
@JoshCrozier 是的，我知道这一点，通过试错法 -7px ;)

【解决方案3】：

图像正在显示inline，因此您的 padding:0 规则没有得到应用。使其成为块/内联块级元素

.home-box-wrap img  { display:block }

【讨论】：