HTML和CSS基礎(chǔ)學(xué)不好，后面會越來越亂，所以我花了很多時間，就為了弄懂最常用又最容易搞錯的Box Model盒子模型。

.

所有網(wǎng)站元素都是 Box 盒子，CSS有一個盒子模型，看得我好辛苦啊。

.

所以，我就用了另一個比喻——別墅——幫我記住到底padding，margin等怎么分。

.

別墅有什么？有房子，有庭院，有圍欄，別墅之間還有小道。剛好對上content, padding, border, margin。

.

圖片筆記不夠?qū)懥?，我這里再加一些小備注：

- Padding 是對自身的修改，而Margin是對外部的設(shè)置。

- 還有的說，父子之間用padding，兄弟之間用margin。

- Margin是透明的，不能添加背景顏色。但它可以顯示元素的背景，比如body。

- Margin 不能疊加，而是看兩者哪個值最大。什么意思呢？比如，兩個上下相鄰的元素，一個margin-bottom是20px，另一個margin-top是40px，那它們之間的距離不是60px，而是40px（取兩者最大值）。（這種情況叫做Collapsing Margin）