我正在使用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>
不良影响:
答案 0 :(得分:3)
将line-height
设为0
.box {
background:#f0f;
padding:0px;
margin:0px;
line-height:0;
}
答案 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>