<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 100px;
                height: 200px;
                border: 5px solid red;
                padding: 10px 20px 30px 40px;
                margin: 0 auto;
                box-sizing: border-box; /*不更改盒子的大小*/
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
</html>

外边距不会改变盒子的大小，盒子大小：
- 宽 = width + border左右的宽度 + padding左右的宽度。
- 高 = height + border上下的宽度 + padding上下的宽度。
padding
- padding：10px；上下左右都是10px。
- padding：10px 20px；上下10px，左右20px。
- padding：10px 20px 30px；上10px，左右20px，下30px。
- padding：10px 20px 30px 40px；上右下左顺时针指定值。
margin：0 auto；设置水平居中。
可定义宽高的元素：
- 块级元素（独占一行）：p、div、h1-h6、ul、li、ol、dl、dt、dd。
- 替换元素：img、input、textarea。
marging可以指定负值。
默认情况下，块级元素时有margin的，因此可以自己声明样式覆盖默认样式。
margin设置为auto时，元素会有水平居中。
外边距合并：垂直方向的外边距相遇时会合并成一个外边距，这个外边距的高度等于较大的那个外边距。

参考

黑马程序员 120天全栈区块链开发开源教程 https://github.com/itheima1/BlockChain

前端基础-CSS基础

前端基础-CSS基础（七）

盒子模型

参考

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐