css - 页脚 ul 边缘渗入 body ......有时

Question

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

My goal: Simple. Push my horizontal nav bar in my footer about 25px below the top edge of the footer. (Footer has a static background image) Code used: #footer ul {margin:25px} Result: No change.

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

I used float in the body, but I cancelled it out. Validations all came out ok. So I accidentally stumbled upon Firebug (never used it before... and still don't know how) but in my aimless clicking, I noticed something odd... when I clicked onto my footer ul, a box overlapping the footer and content was highlighted. So it appeared that my margin did exist, but instead of pushing my nav list down... it kept the nav list static, and expanded into the content.

嗯？所以我做了一个小实验。我在我的内容和页脚中的 div 周围创建了一个明亮的边框，并使用 ul 来弄清楚到底发生了什么。 (我的内容部分有三个 div:内容(向左浮动)；侧边栏(向右浮动)；以及包含两者的 contentWrapper)。

With the borders on, I noticed that my 'outerContent' div was collapsed. A mere 20% or so of the height of the area. So after some (lengthy) research, I came up with the overflow-auto fix. And although I still don't quite understand it, it worked. The contentWrapper expanded to meet the footer, and the footer ul moved to where I wanted to. So problem fixed, right? Well..... not exactly.

我的预览效果很好，所以我返回并删除了边框，这样我就可以继续进行其余的格式设置。只有当我再次预览时......页脚 ul 就回到了它开始的地方。在页脚顶部的边缘。

I did the borders again... the divs seemed fine, except that the contentWrapper was now pushed slightly above the footer to allow for that margin. Now the REALLY weird thing is that when I put the border around my footer... the ul margin works. When I take it off... the ul goes back to where it was.

#$@% 是什么!？虽然我知道解决方法(填充)，但我担心我犯的任何错误都会在未来不断重复(我必须在此之后建立另一个网站)。如果有人能弄清楚我做了什么把事情搞砸了……将不胜感激。

#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 文档，显示了我在说什么。这是临时共享的链接:http://temp-share.com/show/dPf3UCobW

预先感谢所有可能会告诉我哪里出错的人。

Answer 1

首先，为防止您的边距消失，请更改 #footer ul 上的边距元素填充，或添加一个像素的填充到 #footer元素。

在这个 fiddle 中，我们在 #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> 上的填充设置标签不会按您期望的方式工作，因为默认情况下它们不是 block 元素。将此添加到 css 以正确填充它们:

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

同样，您的 ul li应该是内联 block 。

所以...

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

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