我正在尝试使用CSS进行基本布局。
标题
旁白 - 内容
页脚
我为页脚添加了一个margin-top属性，但我不确定它为什么不起作用。这是我到目前为止的简单代码：
<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> </header>
<aside> </aside>
<article> </article>
<footer> </footer>
您可以在此处看到页脚没有获得边距： http://i.imgur.com/PeeTg6I.png
答案 0 :(得分：2)
添加display：inline-block;在页脚。
<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>
答案 1 :(得分：1)
尝试一次
*{
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>
答案 2 :(得分：0)
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>