Question

确定。这真的很奇怪，我花了无数个小时徒劳地寻找类似的东西。我会添加代码，但你也需要视觉效果，所以我会包含一些裁剪的图片来向你展示我的意思。

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

HUH？所以我玩了它...尝试了几种变化，但没有任何效果。现在，我确实找到了一个解决方法...使用填充而不是边距...但是我感到困扰的是边距不起作用所以我一直试图弄清楚我是否在某处弄乱了我的代码。

我在体内使用了漂浮物，但我取消了它。验证都出来了。所以我不小心偶然发现了Firebug（之前从未使用它......但仍然不知道如何）但是在我漫无目的的点击中，我发现了一些奇怪的东西...当我点击我的页脚ul时，一个重叠页脚和内容的盒子突出显示。因此看起来我的保证金确实存在，但不是按下我的导航列表......它使导航列表保持静态，并扩展到内容中。

HUH？所以我做了一个小实验。我在内容和页脚中围绕div创建了一个明亮的边框，以确定究竟发生了什么。（我的内容部分有三个div：内容（左侧浮动）;侧边栏（右侧浮动）;以及包含两者的contentWrapper。

边框打开后，我注意到我的'outerContent'div崩溃了。仅占该地区高度的20％左右。经过一些（冗长的）研究，我想出了溢出 - 自动修复。尽管我仍然不太了解它，但它确实奏效了。 contentWrapper扩展为符合页脚，页脚ul移动到我想要的位置。所以问题解决了吧？嗯......不完全是。

我的预览很好，所以我回去并删除了边框，这样我就可以继续使用剩下的格式了。只有当我再次预览时...页脚ul才会回到它开始的位置。在页脚顶部的最边缘。

我再次做了边框... div似乎很好，除了contentWrapper现在被推到略高于页脚以允许该边距。现在真正奇怪的是，当我把边框放在我的页脚周围时...... ul边缘有效。当我把它取下来...... 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;
}

该网站未处于有效状态，但我上传了一个单词doc，其中的图片显示了我正在谈论的内容。这是Temp Share的链接：http://temp-share.com/show/dPf3UCobW

提前感谢所有可能告诉我哪里出错的人。

Answer 1

我用萤火虫测试它并且工作正常。如果您有问题，可以在最后添加！important

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

甚至你想做的是在ul之前和之后获得一些余量。为此，您可以为#footer设置边距和/或填充值。

希望这有帮助！

Answer 2

首先，为防止您的边距消失，请将#footer ul元素上的边距更改为填充，或者将{px}填充添加到#footer元素。

在这个小提琴中，我们将#footer上的填充设置为1px并将高度降低2px以进行补偿。

FIDDLE

#footer ul {
    list-style: none outside none;
    padding: 40px;
    text-align: center;
}

或

#footer {
    background-color: #DDDDDD;
    background-repeat: no-repeat;
    clear: both;
    color: #808080;
    font-size: 12px;
    height: 228px;
    padding: 1px;
}

查看css，<a>标记上的填充设置将无法按预期方式工作，因为默认情况下它们不是块元素。将其添加到css中以正确填充它们：

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

同样，您的ul li应该是内嵌块。

所以......

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

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

Answer 3

这是供将来参考。我只是想添加以下链接来赞美上面的Dom Day。我仍然难以概念化事件，但在两个链接之间，它将帮助我研究它，直到我发现相当于一个＆＃39;邻接/折叠边缘为傻瓜＆＃39;现场。 www.w3.org/TR/CSS2/box.html - Details near the bottom of the web page.

Footer ul margin流入体内...有时候

3 个答案: