Question

我将我的网站从固定布局转换为响应式布局并使用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; }

除了图像下面的空白外，所有工作都按预期进行，我无法找到原因，并尝试删除填充并调整框高度，并且应该将其全部标准化。

由于

Answer 1

你基本上有两个选择。

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

Updated Example

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

在某些情况下，您还可以将display元素的img从默认值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属性更改为 other 而不是默认值baseline，将删除空格。通过将元素的display更改为block，vertical-align属性不再对元素产生影响，因为它不再是inline。

Answer 2

@JoshCrozier有一个很好的出路！但我想添加一个可以帮助你的厚颜无耻的技巧。只需向所有margin-bottom元素添加否定img。

img{
    margin-bottom:-7px;
}

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

Answer 3

正在显示图像inline，因此您的填充：0规则未应用。使其成为块/内联块级元素

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

图像下方的空白

3 个答案: