前端設計師(shī)第一(yī)課：CSS中外邊距 margin、邊框border和内邊框 padding的差異

CSS  裡(lǐ)padding、邊距和邊框屬性

W3C組織建議将頁面上(shàng)的所有對象放(fàng)在一(yī)個(gè)框中。設計人員(yuán)可以通(tōng)過創建定義（包括段落、列表和标簽）來控制此框的屬性

問題、圖片和圖層。長(cháng)方體模型主要定義四個(gè)區域：内容、内邊距padding、邊框和外邊距。對于初學者來說，他們經常很吃(chī)力

闡明邊距、背景顔色、背景圖像、填充、内容和邊框之間的層次結構、關系和相(xiàng)互影響。這提供了長(cháng)方體模型的三維表示

首先要先了解幾個(gè)重要的元素，目的是為(wèi)了促進你的理解和記憶。

邊框Border：層或表格裡(lǐ)的邊框

背景色Background colo：層或邊框裡(lǐ)的背景色

背景圖像Background color：層或邊框裡(lǐ)的背景圖像

内邊距 padding：層邊界和層内容之間的空白(bái)距離

外邊距 margin： 塊級元素之間的空間距離

内容Conten： 一(yī)般是文字或圖片等信息

接下(xià)來，我們将讨論HTML和CSS的關鍵——Box模型。理解Box模型的關鍵是margin和padding屬性，正确理解這兩個(gè)屬性也至關重要

這是學習CSS布局的關鍵。

注意：為(wèi)什麽不翻譯外邊框距margin和内邊框距 padding？

原因⼀: 漢語中沒有相(xiàng)應的單詞；

原因#1：即使有這樣的單詞，因為(wèi)在編寫CSS代碼時，需要使用“margin”和“padding”，如果我們總是用中文單詞來解釋它們，在實踐中也需要一(yī)些時間

很容易混淆邊距和填充的概念。

如果你對HTML有一(yī)定的基礎，你應該了解一(yī)些基本元素，比如p、h1-h6、br、div、li、ul、img等。如果這些元素被細分，它們可以被分離

對于頂級元素、塊級元素和内聯元素。

塊級元素是構成HTML的主要和關鍵元素，任何塊級元素都可以使用Box模型進行解釋。

框模型：任何塊級元素都由五部分組成：内容、填充、背景（包括背景顔色和圖像）、邊框和邊距。

車身示意圖如下(xià)：

平面布置圖如下(xià)：

基于以上(shàng)兩張圖，我相(xiàng)信用戶會(huì)對Box模型有一(yī)個(gè)直觀的了解。

以下(xià)内容解釋了邊距和填充屬性：

1.頁邊距：包括頁邊距頂部、頁邊距右側、頁邊距底部和頁邊距左側，控制塊級元素之間的距離，透明和不可見(jiàn)。基于頂部，右側

底部和左側的順時針規則可以寫為(wèi)margin：40px 40px 40px 40px；

為(wèi)了便于記憶，請參考下(xià)圖：

當上(shàng)、下(xià)、左、右邊距值一(yī)緻時，可以縮寫為(wèi)：

margin：40px 40px；

第一(yī)個(gè)40px表示上(shàng)下(xià)邊距值，第二個(gè)40px代表左右邊距值。

當上(shàng)、下(xià)、左、右邊距值一(yī)緻時，可以縮寫為(wèi)：

margin：40px；

2.填充：包括頂部填充、右側填充、底部填充和左側填充，用于控制塊級元素及其代理中内容和邊界之間的距離

代碼的縮寫請參閱margin屬性的書寫。

在這裡(lǐ)，我們對margin和padding屬性的基本方法有了基本的了解。然而，在實際應用中，總有一(yī)些事(shì)情是你無法理解的。

注意：當您希望兩個(gè)元素的内容垂直分隔時，可以選擇padding-top/bottom填充或margin-top/bottom。我們建議您

盡量使用padding-top/bottom填充來實現您的目标，因為(wèi)CSS中存在Collapsing margin( 折疊邊距)的現象。

Collapsing margin( 折疊邊距)：頁邊距折疊現象隻存在于相(xiàng)鄰或從(cóng)屬元素中，垂直方向的頁邊距。

具體說明如下(xià)：

如果隻提供一(yī)個(gè)，則它将應用于所有四條邊；

如果提供兩個(gè)，則第一(yī)個(gè)位于從(cóng)上(shàng)到(dào)下(xià)的位置，第二個(gè)位于從(cóng)左到(dào)右的位置；

如果提供三個(gè)，第一(yī)個(gè)在上(shàng)面，第二個(gè)在左右，第三個(gè)在下(xià)面；

如果提供了所有四個(gè)參數值，它們将按從(cóng)右上(shàng)到(dào)左下(xià)的順序放(fàng)置在四邊上(shàng)。

Body｛padding:36px；｝//對象四邊的補丁邊距均為(wèi)36px

Body{padding:36px 24px；}//頂部和底部的補丁邊距為(wèi)36px，左側和右側的補丁邊距均為(wèi)24px

Body{padding:36px 24px 18px；}//頂部和底部的補丁邊距分别為(wèi)36px和18px，左側和右側的補丁邊距為(wèi)24px

Body{padding:36px 24px 18px 12px；}//頂部、右側、底部和左側的補丁邊距分别為(wèi)36px、24px、18px和12px