1. css 内间距

也称：“内补白”或“内补丁”

padding	检索或设置对象四边的内部边距，如 padding:10px; padding:5px 10px;
padding-top	检索或设置对象顶边的内部边距
padding-right	检索或设置对象右边的内部边距
padding-bottom	检索或设置对象下边的内部边距
padding-left	检索或设置对象左边的内部边距

举例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

        <div class="box4">box4</div>

    </body>

</html>

*{

    width: 100px;

    height: 100px;

}

.box1{

    background-color: #edd094;

}

.box2{

    background-color: #a7ab86;

    padding-top: 10px;

    padding-bottom: 10px;

    padding-left: 10px;

    padding-right: 10px;

}

.box3{

    background-color: #b35e59;

    padding: 10px;

}

.box4{

    background-color: #8a7e94;

    padding: 10px 15px;

}

效果

[Web 前端] 013 css 内外边距-LMLPHP

2. css 外间距

也称：“外补白”或“外补丁”

margin	检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top	检索或设置对象顶边的外延边距
margin-right	检索或设置对象右边的外延边距
margin-bottom	检索或设置对象下边的外延边距
margin-left	检索或设置对象左边的外延边距

举例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

        <div class="box4">box4</div>

    </body>

</html>

*{

    width: 100px;

    height: 100px;

}

.box1{

    background-color: #edd094;

}

.box2{

    background-color: #a7ab86;

    margin-top: -10px;

    margin-bottom: 10px;

    margin-left: 10px;

    margin-right: 10px;

}

.box3{

    background-color: #b35e59;

    margin: 10px;

}

.box4{

    background-color: #8a7e94;

    margin: 10px 20px;

}

.box5{

    background-color: #f1c4be;

    margin: 10px auto;

}

效果截图

[Web 前端] 013 css 内外边距-LMLPHP

margin 相关技巧

设置元素水平居中：margin:x auto;
margin 负值让元素位移及边框合并