盒子模型原理

HTML中任何一个块级元素都可以看成是一个盒子，为什们说看成一个盒子呢？

图片[1]-CSS盒子模型-宅博客

盒子包含了哪些东西？我用大白话解释一下~

1：盒子里面放的内容(content),比如盒子里放了一些零食

2：盒子本身（border），盒子本身是由某些材料制作成几面，构成一个盒子，也就是所谓的边框

3：盒子内容（content）距离盒子本身(border)的距离，叫做内边距(padding)

盒子内容距离盒子边框的距离

4:盒子边框(border)距离下一个物品的边距，比如你的盒子旁边还有一个盒子，那么A盒子距离B盒子的距离，叫做A盒子的外边距(margin)

再用官方图理解一下，就很容易看懂了

图片[3]-CSS盒子模型-宅博客

分别是

1：内容(content)

2：边框(border)

3：内边距(padding)

4：外边距(margin)

扩展知识

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            padding: 50px;
            text-align: center;
            line-height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">我是内容</div>
</body>

</html>

图片[4]-CSS盒子模型-宅博客