如何使用CSS删除页面的下边距


How to remove the bottom margin of page using CSS

请参阅此页面:

http://artezanatostudio.com/index.php

请注意,在底部,页脚底线下方有一个边距。到目前为止,我为摆脱它所做的一切努力都失败了。我曾尝试使用:

body, html { margin: 0; padding: 0; }
#footer { margin: 0; padding: 0; }

我甚至尝试过:

#footer { margin: -50px; }

一切都无济于事。

虽然这个页面有很多CSS文件,但我正在编辑的两个重要文件是下面的

site_above/included/templates/zenn/css/style.css

site_above/included/templates/zenn/css/style-ci.css

如果你能提供任何线索来帮助我,这将防止我过早地变得大胆,你会感到满意,因为你帮助了一个快要疯了的人。

提前谢谢。

    #footer > div.row {
       margin-bottom: 0px;
    }

问题来自的样式表是style-ci.css,specifc规则在.rowdiv.上

删除:

div.row{
    margin-bottom: 26px;
}

并使其边距底部:0px;

注意:使用Chrome开发工具很容易理解!!

试试这个:

div.row {
font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-bottom: 0px;
}

这里的关键是margin-bottom被更改为0px

你使用的浏览器有一个像样的网络检查员吗?我使用Chrome网络开发人员控制台在不到10秒内就能准确定位。

在页脚中有一个带有class行的div。它有一个26像素的页边空白底部。删除此值,问题就解决了。

div.row {
   font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
   color: #7f7f7f;
}

您也可以将其设置为零,但如果没有必要,我建议您删除它。

请从Style-ci.css中删除margin-bottom: 26px;(行号:86)

即更改您的div.row css如下

div.row {
       font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
       color: #7f7f7f;
}

<div id="footer">中的<div class="row">上移除margin-bottom: 26px;

您可以很容易地看到这一点。

如果您使用的是Mozilla Firefox/Chrome:

  1. 右键单击有问题的元素
  2. 选择最后一个选项-检查元素(或类似的选项)
  3. 开始将鼠标悬停在弹出的代码中的元素上,看看是什么让额外的空间出现在那里

当您浏览右侧出现的相关css样式时,您很快就会发现哪里有额外的边距

在这种情况下,正如元素div.row:中已经提到的那样

div.row {
    font-family: MuseoSans-Reg,Verdana,Geneva,sans-serif;
    color: #7F7F7F;
    margin-bottom: 26px;
}

希望它能帮上一点忙!

当然还有更好的解决方案,但目前您可以尝试:

#footer {
    overflow: hidden;
}