Question

这是一个相当基本的HTML / CSS问题，对不起，我不得不在这里问这个问题（我搜索到了最好的问题！）。我编写了以下HTML和CSS代码，虽然标题部分与文章分开了20个像素，但是除了部分之外，页脚之间的距离仅为10像素。事实上，无论我为页脚设置的边距如何，分离仍然是10px。我做错了什么？

如果您可以在浏览器中测试此代码以查看我的意思，那将是惊人的。我还在下面的图片中插入链接到文章/旁边部分和页脚部分之间倾斜边距的图片。

http://cl.ly/image/3M2u1L0x2C0x

HTML代码

<!DOCTYPE html>
<html>
    <head>
    <title>My Grey Boxes</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>

<body>
<div id="wrapper">
    <header></header>
    <article></article>
    <aside></aside>
    <footer></footer>
</div>
</body>
</html>

CSS代码

#wrapper {
    margin: auto;
    width: 940px;
    }

body {
    background-color: #fafafa;
    }

header {
    height: 120px;
    width: 920px;
    display: block;
    margin: 10px 10px;
    position: relative;
    background-color: #c6c6c6;
    }

article {
    height: 740px;
    width: 600px;
    margin: 10px 10px;
    float: left;
    position: relative;
    background-color: #c6c6c6;
    }

/* Keep scrolling! */

aside {
    height: 740px;
    width: 300px;
    margin: 10px 10px;
    float: right;
    position: relative;
    background-color: #c6c6c6;
    }

footer {
    height: 120px;
    width: 920px;
    display: block;
    margin: 10px 10px; /* Why is this being ignored? */
    background-color: #c6c6c6;
    position: relative;
    clear: both;
    }

任何帮助将不胜感激！如果我没有遵循社区的所有指导原则，我很抱歉 - 这是我第一次在StackOverflow上发帖，我很快就会选择！谢谢！：）

Answer 1

你需要清除之前的浮动。将HTML更改为此将起作用：

<div id="wrapper"> <header></header> <article></article> <aside></aside> <div style="clear:both;"></div> <footer></footer> </div>

为什么我的页脚的页边距没有显示？ [CSS]

1 个答案: