CSS-Model 盒模型

前言

在HTML中每一个元素都会被CSS当作一个矩形盒子，CSS可以更改其宽度、高度、跟其他元素的距离等等的属性。而每一个矩形盒子都会由四个部分 content padding border margin 组成。

图例

我画的

在浏览器中可触碰元素点击右键「检查」查看该元素的Box-Model

Content

真正容纳内容物的空间。
在里面可以放置文字、图片、元素或任何你想放的东西。

<div>
    我是一段文字
    <img src="/jpg.jpg" alt="">
    <a></a>
    <nav></nav>
</div>

Padding

设定盒子与内容物(Content)之间的距离。又称为内距。

首先我们先来做一个没有设定Padding的元素。可以看到元素的边框紧紧的贴着Content

但在我们为元素设定padding後，可以看到边框和Content离的很远~

padding:30px;

再来查看浏览器中的Box Model，上下左右都有了30px的padding

触碰padding▼ 画面中的元素也会跟着显示绿色Padding的范围

Border

边框。
元素可视最外围的那一层。

这是没有边框元素~

在我们加了黑色的边框之後呢

border:3px solid black;

Margin

Box Model中的最外层，俗称外距。
设定外距会让元素更接近、远离(可设定负值、正值)其他元素

下图可爱的角落生物碰到了病毒，我们要帮助他维持防疫距离。

设定 Margin

margin-left:150px;

成功逃离病毒(//●⁰౪⁰●)//