Question

我正在使用responsive.gs框架创建网站。

我刚刚在homepage上的一行中添加了一些图片。

由于某种原因，图像底部显示“填充”。 Chrome开发者工具显示没有填充，但显示包含div为230px x 239px时应为230px x 230px。

我有一种感觉，这是由于responsive.gs CSS中的clearfix方法，因为它为布局的所有主要元素添加了:after元素。不过我已经尝试过，更改为display:block，overflow:hidden，padding:0px，margin:0px并且没有运气清除'填充'

/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

有没有人遇到过这样的事情？

直播网站就在这里...... http://www.haydockoffice.co.uk/

CSS for box ...

.box {
    background:#f0f;
    padding:0px;
    margin:0px;
}

响应式网格系统的CSS ...

http://www.haydockoffice.co.uk/assets/css/grid.css

包装盒的HTML ...

<div id="homepage" class="row">

    <div id="content" class="row gutters">

        <div class="box col s3">
            <img src="assets/images/products/product1.jpg" />
        </div>

        <div class="box col s3">
            <img src="assets/images/products/product1.jpg" />
        </div>

        <div class="box col s3">
            <img src="assets/images/products/product1.jpg" />
        </div>

        <div class="box col s3">
            <img src="assets/images/products/product1.jpg" />
        </div>

    </div>

</div>

不良影响：

unwanted padding

Answer 1

将line-height设为0

.box {
   background:#f0f;
   padding:0px;
   margin:0px;
   line-height:0;
}

之前：http://jsfiddle.net/JfMFF/

之后：http://jsfiddle.net/JfMFF/1/

Answer 2

将display: block应用于图片。

Answer 3

我知道你说你已经尝试过display：block但是我刚刚用检查员编辑了网站并应用了display：block to the image删除了padding。

<div id="homepage" class="row">

<div id="content" class="row gutters">

    <div class="box col s3">
        <img style="display:block;" src="assets/images/products/product1.jpg" />
    </div>

    <div class="box col s3">
        <img style="display:block;" src="assets/images/products/product1.jpg" />
    </div>

    <div class="box col s3">
        <img style="display:block;" src="assets/images/products/product1.jpg" />
    </div>

    <div class="box col s3">
        <img style="display:block;" src="assets/images/products/product1.jpg" />
    </div>

</div>

</div>

图像后的幻影'填充'

3 个答案: