Css 页脚边缘出血进入身体。。。有时

嗯。这真的很奇怪，我花了无数个小时徒劳地寻找类似的东西。我将添加代码，但您也需要视觉效果，因此我将包括一些裁剪过的图像，向您展示我的意思

我的目标：简单。将我的水平导航条推到页脚顶部边缘下方约25px处。（页脚具有静态背景图像） 使用的代码：#页脚ul{margin:25px} 结果：没有变化

嗯？所以我玩了它。。。尝试了几种变体，但都不起作用。现在，我确实找到了一个解决办法。。。使用填充而不是边距。。。但它困扰着我，保证金不起作用，所以我一直试图找出我是否把我的代码搞砸了

我在身体里用了浮球，但我把它取消了。验证结果都很好。所以我无意中发现了Firebug（以前从未使用过它…现在仍然不知道如何使用），但在我漫无目的的点击中，我注意到了一些奇怪的东西。。。当我点击页脚ul时，一个与页脚和内容重叠的框被突出显示。所以我的保证金似乎确实存在，但我没有把资产净值表往下推。。。它使导航列表保持静态，并扩展到内容中

嗯？所以我做了一个小实验。我在我的内容、页脚和ul中的div周围创建了一个明亮的边框，以准确地了解发生了什么。（我的内容部分有三个div：内容（左浮动）、边栏（右浮动）和包含这两个部分的contentWrapper）

随着borders的打开，我注意到我的“outerContent”分区被折叠了。仅占该地区高度的20%左右。因此，经过一些（漫长的）研究，我提出了溢出自动修复。虽然我还是不太明白，但它起了作用。contentWrapper扩展以满足页脚的需要，页脚ul移动到我想要的位置。 所以问题解决了，对吗？好。。。。。不完全是

我的预览做得很好，所以我回去删除了边框，这样我就可以继续进行其余的格式化。只有当我再次预览时。。。页脚就在它开始的地方。在页脚顶部的最边缘

我又去边界了。。。div看起来不错，只是contentWrapper现在被稍微推到页脚上方以留出空白。 现在真正奇怪的是，当我把我的页脚周围的边界。。。ul保证金有效。当我脱下它。。。联邦调查局回到了原来的位置

什么是#$@%！？虽然我知道解决方法（填充），但我担心会使我犯的任何错误更加复杂，并在将来不断重复（此后我必须建立另一个网站）。如果有人知道我是怎么搞砸的。。。我们将不胜感激

#contentWrapper {
    overflow: auto;
    padding: 20px 10px;
}
#content {
    float: left;
    width: 660px;
}
#content h1 {
    padding: 0 0 20px;
}
#content h2 {
    padding: 20px 0 10px;
}
#content p {
    line-height: 160%;
    text-align: justify;
}
#content img {
    float: left;
    margin-right: 10px;
}
#content ul {
    line-height: 160%;
    list-style: disc outside url("../images/Bullet-artsy1.png");
    margin: 0 0 10px 325px;
    padding: 10px 0;
}
#content .info {
    margin: 5px 0 10px 250px;
}
#rightSide {
    float: right;
    line-height: 140%;
    padding: 0 10px;
    width: 220px;
}
#rightSide h2 {
    margin-top: 10px;
    padding-bottom: 10px;
}
#rightSide p {
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 16px;
    text-align: justify;
}
#rightSide img {
    display: block;
    margin: 5px auto;
}
#footer {
    background-image: url("../images/TCS-Footer1b-plain-230px h.png");
    background-repeat: no-repeat;
    clear: both;
    height: 230px;
}
#footer ul {
    list-style: none outside none;
    margin: 25px;
    text-align: center;
}
#footer ul li {
    display: inline;
    margin: 30px 0;
}
#footer ul li a {
    color: #E8FAFF;
    padding: 30px;
}
#footer p {
    color: #E8FAFF;
    text-align: center;
}
#footer img {
    bottom: -60px;
    position: relative;
    right: -900px;
}

该网站不活跃，但我上传了一个word文档，其中的图片显示了我正在谈论的内容。这是指向临时共享的链接：

---

提前感谢所有可能会告诉我哪里出了问题的人。

我使用firebug测试了它，工作正常。如果您有问题，您可以添加！重要的是在这最后

#footer > ul {
    margin: 13px !important;
}

甚至你想做的就是在ul认证之前或之后获得一些利润。为此，您可以为#页脚设置边距和/或填充值

---

希望这有帮助

首先，为了防止页边距消失，请将

#footer ul

元素上的页边距更改为padding，或将一像素的padding添加到

#footer

元素

在这把小提琴中，我们将

#footer

上的填充设置为1px，并将高度减少2px以进行补偿

或

看看css，您在

标记上的填充设置不会按照您期望的方式工作，因为默认情况下它们不是块元素。将此添加到css以正确填充它们：

#footer ul li a { 
    display: inline-block;
 }

同样，您的

ulli

应该是内联块

所以

#footer ul li {
    display: inline-block;
    margin: 30px 0;
}
#footer ul li a {
    display: inline-block;
    color: #E8FAFF;
    padding: 30px;
}

---

基本上，只需注意，当顶部和底部边距接触时，包括父元素和子元素的边距，将使用最大边距，但边距将被推到最外层元素之外。

这是供将来参考。我只是想添加以下链接来赞美上面的Dom Day。我仍然很难对事件进行概念化，但在这两个链接之间，它将帮助我研究它，直到我找到一个相当于“虚拟人邻接/崩溃边缘”的站点

在#页脚ul上设置边距不会从视觉上影响ul。它就在原地。但如果我在页脚周围加上边框，ul会做出应有的反应。如果你看我上传的.doc，它会显示我所指内容的图像。请注意，我不希望页脚周围有边框，但我想知道为什么这会对ul边距代码的响应方式产生影响。您会注意到，几乎所有这类引出答案的问题都包含边框。这是相当不言自明的，并且使人们在查看您的问题时更容易进行故障排除。至少，在你的问题中加入一些html标记。我道歉。我不习惯发布帮助信息，所以不知道JSFIDLE及其工作原理（我确实在寻找问答，但找不到）。我尝试了一个快速的解决办法（上传的文档），因为我知道这是一个css问题，并希望这将是足够的。不过，您是对的，现在我已经睡了一觉，我将研究如何熟悉JSFIDLE以供将来参考。不用担心。然而在实践中，如果这个问题有一把小提琴，这就说明了问题所在，它可能在几分钟内就得到了回答。相反，您必须等待使用stackexchange的人员来避免他们的日常工作。哈。哇。。。我说得太快了。问题依然存在。实际上，我已经在JSFIDLE中创建了它。按照我的设置，它看起来很好。进入#页脚并删除边框，然后观察ul的定位。这就像边缘消失了，尽管它实际上只是流血进入身体。注意，将边缘更改为填充是有效的

#footer ul li a { 
    display: inline-block;
 }

#footer ul li {
    display: inline-block;
    margin: 30px 0;
}
#footer ul li a {
    display: inline-block;
    color: #E8FAFF;
    padding: 30px;
}