[Web 前端] 013 css 内外边距

最新推荐文章于 2024-08-12 00:15:00 发布

weixin_30929011

最新推荐文章于 2024-08-12 00:15:00 发布

阅读量186

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/yorkyu/p/10801904.html

版权

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;
}

效果

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;
}