CSS 基本浮动布局，页脚顶部边距

Question

我正在尝试使用 CSS 的基本布局。

页眉
旁白 - 内容
页脚

我为页脚设置了一个顶部边距属性，但我不确定为什么它不起作用。这是我到目前为止的简单代码：

 

<style>

header {
 width: 100%;
  height: 100px;
 border: 1px solid black;
 margin-bottom: 10px;
}

aside {
 width: 100px;
 height: 200px;
 border: 1px solid green;
 float: left;
 margin-right:10px;
}

article {
    height: 200px;
    width: 200px;
    border: 1px solid red;
    float: left;
}

footer {
 clear: both;
 border: 1px solid blue;
 width: 100%;
 height: 100px;
 margin-top: 10px;
}

</style>

<header> &nbsp; </header>
<aside>&nbsp;</aside>    
<article>&nbsp;</article>    
<footer>&nbsp;</footer>

您可以在此处看到页脚没有边距： http://i.imgur.com/PeeTg6I.png

Answer 1

添加显示：内联块；在页脚中。

<style>

header {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    margin-bottom: 10px;
}

aside {
    width: 100px;
    height: 200px;
    border: 1px solid green;
    float: left;
    margin-right:10px;
}

article {
    height: 200px;
    width: 200px;
    border: 1px solid red;
    float: left;
}

footer {
    clear: both;
    border: 1px solid blue;
    width: 100%;
    height: 100px;
    margin-top: 10px;
 display: inline-block;
}

</style>

<header>
    </header>

    <aside>
    </aside>

    <article>
    </article>

    <footer>
    </footer>

Answer 2

试一试

*{
margin:0px;
  padding:0px;
}
header {
    width: 100%;
    height: 100px;
    border: 1px solid black;
  margin-bottom:10px;
    
}

aside {
    width: 100px;
    height: 200px;
    border: 1px solid green;
    float: left;
   margin-bottom:10px;
   
}

article {
    height: 200px;
    width: 200px;
    border: 1px solid red;
    float: left;
   margin-bottom:10px;
   
}

footer {
    clear: both;
    border: 1px solid blue;
    width: 100%;
    height: 100px;
   margin-right:10px;
    
}

<body>
    <header>
    </header>

    <aside>
    </aside>

    <article>
    </article>

    <footer>
    </footer>
</body>

Answer 3

body{
    font-family:Arial, Helvetica, sans-serif;


}

header{
    border-radius:10px;


    padding:10px 1%;
    margin:10px 1%;
    background-color:#066;
    text-align:center;
}


article{
    background-color:#066;
    width:50%;
    height:100%;
    float:left;
    border-radius:10px;
    text-align:center;
    margin:10px;

}

content{
     background-color:#066;
     width:40%;
     height:100%;
     border-radius:10px;
     text-align:center;
     margin:10px;
     float:right;
}
footer{

    clear:both;
    border-radius:10px;
    background-color:#066;
    text-align:center;
    padding:10px;
    margin:10px; 
}

       <header>
            <h2>Header</h2>
              </header>
                <article>
                 <h2>Aside</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.       Maecenas id odio velit. Praesent orci lectus, fermentum vel ullamcorper vel, pharetra ac elit. Fusce eu sapien ac ligula tempor fermentum. Sed vulputate rutrum mattis. Ut et metus ac lectus fermentum porttitor.</p>
                    </article>  
                      <content>
                       <h2>Content</h2>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id odio velit. Praesent orci lectus, fermentum vel ullamcorper vel, pharetra ac elit. Fusce eu sapien ac ligula tempor fermentum. Sed vulputate rutrum mattis. Ut et metus ac lectus fermentum porttitor. </p>
                   </content>
                 <footer>
              <h2>Footer</h2>
        </footer>

CSS 基本浮动布局，页脚顶部边距

CSS basic float layout, margin-top for footer

html

css

layout

margins