margin和padding

margin可以被用来设置外边距, 简单点说就是边框与边框的距离,可以使用的属性有 top right bottom left, 也可以按照margin:上,右,下,左的形式设置或者直接使用margin-top的形式。

<html>
<head>
<title>margin</title>
<style type="text/css">
body
{
    background:red;
}
.main
{
        width:100%; /*  百分比是按照body原始的大小  */
    height:100%;
    background:yellow;
}
</style>
</head>
<body>
<div class="main">
abcd
</div>
</body>
</html>

给div设置占用100%界面后, 依然无法做到全部覆盖,透露出红色背景,黄色界面。 这个是因为body本身还存在默认的间距。

<html>
<head>
<title>margin</title>
<style type="text/css">
body
{
    background:red;
    margin:0px;
}
.main
{
    width:100%; /*  百分比是按照body原始的大小  */
    height:100%;
    background:yellow;
}
</style>
</head>
<body>
<div class="main">
abcd
</div>
</body>
</html>

body清0后, 红色背景消失, 即此时的margin代表div外border到body体的距离。

padding是content到内border的距离,即abcd到div的距离

<html>
<head>
<title>margin</title>
<style type="text/css">
body
{
    background:red;
    margin:0px;
}
.main
{
    width:100%; /*  百分比是按照body原始的大小  */
    height:100%;
    background:yellow;
    padding-left:20px; /* abcd 右移20个像素 */
}
</style>
</head>
<body>
<div class="main">
abcd
</div>
</body>
</html>

这样看起来直观一点, 可以明显看到移动是相对div层的移动

<html>
<head>
<title>margin</title>
<style type="text/css">
body
{
    background:red;
}
.main
{
    width:100%; /*  百分比是按照body原始的大小  */
    height:100%;
    background:yellow;
    padding-left:20px; /* abcd 右移20个像素 */
}
</style>
</head>
<body>
<div class="main">
abcd
</div>
</body>
</html>
<html>
<head>
<title>margin</title>
<style type="text/css">
body
{
    background:red;
    margin:0px;
}
.main
{
    width:100%; /*  百分比是按照body原始的大小  */
    height:100%;
    background:yellow;
    margin-top:50px;
    margin-right:50px;
    margin-bottom:50px;
    margin-left:50px;

}
</style>
</head>
<body>
<div class="main">
abcd
</div>
</body>
</html>

body体里清除了上右下左的到div外border的距离,div里又从新设置了div外border到body的上右下左间距为各50像素。