图像后的幻影'填充'

时间:2014-02-14 10:10:22

标签: html css responsive-design

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

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

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

我有一种感觉,这是由于responsive.gs CSS中的clearfix方法,因为它为布局的所有主要元素添加了:after元素。不过我已经尝试过,更改为display:blockoverflow:hiddenpadding:0pxmargin: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

3 个答案:

答案 0 :(得分:3)

line-height设为0

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

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

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

答案 1 :(得分:3)

display: block应用于图片。

答案 2 :(得分:1)

我知道你说你已经尝试过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>