前言

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

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