共計 2813 個字符，預計需要花費 8 分鐘才能閱讀完成。

這篇文章主要介紹“CSS 的 padding 和 margin 屬性怎么使用”的相關知識，丸趣 TV 小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS 的 padding 和 margin 屬性怎么使用”文章能幫助大家解決問題。

CSS 中 padding、margin 兩個重要屬性的詳細介紹及舉例說明

注: 為什么不翻譯 margin 和 padding? 原因一, 在漢語中并沒有與之相對應的詞語; 原因二: 即使有這樣的詞語, 由于在編寫 CSS 代碼時, 必須使用 margin 和 padding, 如果我們總用漢語詞語代替其來解釋的話, 到了實際應用時容易混淆 margin 和 padding 的概念。

以下說明 margin 和 padding 屬性：

1. Margin: 包括 margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的, 對于 Fig. 2 所示的上右下左 margin 值均為 40px, 因此代碼為:

margin-top: 40px; margin-right: 40px; margin-bottom: 40px; margin-left: 40px;

根據上, 右, 下, 左的順時針規則, 簡寫為

margin: 40px 40px 40px 40px;

當上下, 左右 margin 值分別一致, 可簡寫為:

margin: 40px 40px;

前一個 40px 代表上下 margin 值, 后一個 40px 代表左右 margin 值.
當上下左右 margin 值均一致, 可簡寫為:

margin: 40px;

2. Padding: 包括 padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, content 與 border 之間的距離, 其代碼, 簡寫請參考 margin 屬性的寫法.
至此, 我們已經基本了解 margin 和 padding 屬性的基本用法. 但是, 在實際應用中, 卻總是發生一些讓你琢磨不透的事, 而它們又或多或少的與 margin 有關.
注: 當你想讓兩個元素的 content 在垂直方向 (vertically) 分隔時, 既可以選擇 padding-top/bottom, 也可以選擇 margin-top/bottom, 再此 Jorux 建議你盡量使用 padding-top/bottom 來達到你的目的, 這是因為 CSS 中存在 Collapsing margins(折疊的 margins)的現象.

Collapsing margins: margins 折疊現象只存在于臨近或有從屬關系的元素, 垂直方向的 margin 中. 文字說明可能讓人費解, 下面用一個例子說明 margin-collapsing 現象.
例: 在 html 文件的之間寫入如下代碼:

div id=”ID1″   h2 id=”ID2″ Margins of ID1 and ID2 collapse vertically. br/   元素 ID1 與 ID2 的 margins 在垂直方向折疊.h2  div

在與其外聯的 CSS 文件中寫入:

* { padding:0; margin:0; } #ID1 { background-color: #333; color: #FFF; margin-top: 10px; margin-bottom: 10px; } #ID2 { font: normal 14px/1.5 Verdana, sans-serif; margin-top: 30px; margin-bottom: 30px; border: 1px solid #F00; }

代碼解釋:

1. 在 html 寫入的代碼表示, 在 html 中插入 id 分別為 ID1 和 ID2 的兩個塊級元素 div, h2;

2. *{padding:0; margin:0;}: 使瀏覽器默認的元素 padding 和 margin 值均歸零;

3. #ID1{…}: 使 id 為 ID1 的元素 div 的背景顏色為 #333, 字體顏色為 #FFF, margin-top/bottom 為 10px;

4. #ID2{…}: 使 id 為 ID2 的元素 h2 的字體大小為 14px, verdana 字體, 行高為字體高的 150%, 正常粗細. margin-top/bottom 為 30px, 邊框為 1px 寬, 紅色實線.

依據以上解釋, 我們應該得到如下效果(Fig. 3):

即 ID1 的 margin-top/bottom=ab=ef=10px;
ID2 的 margin-top/bottom=bc=de=30px;
但用瀏覽器打開 html 文件, 卻得到 Example4 的效果, 如下圖(Fig. 4):

即 ab=cd=30px, ID1 的 margin-top/bottom=10px 被折疊了, 而且 ID1 應有的 margin 黑色背景也一同被折疊消失了。

◆為什么會折疊:

造成以上現象的原因是, 我們在 CSS 中并沒有聲明 id 為 ID1 的元素 div 的 height(高), 因此它的高便被設為 auto(自動)了. 一旦其值被設為 auto, 那么瀏覽器就會認為它的高為子元素 ID2 的 border-top 到 border-bottom 之間的距離, 即 Fig. 4 中 bc 的長度, 所以子元素 ID2 的 margin-top/bottom(30px)就伸出到了父元素 ID1 之外, 出現了 Fig. 4 中 ab 與 cd 之間的空白區域. 因此父元素 ID1 的 margin-top/bottom 因子元素的”紅杏出墻”而被折疊消失了.

如何解決折疊問題: 可能大家最初想到的辦法就是根據折疊發生的原因—auto, 來解決問題. 但是, 在實際操作中, 某些元素如 div, h2, p 等, 我們是不可能預先知道它的高是多少的, 因此在 CSS 文件中是不能常規通過聲明元素的高來解決折疊問題.

我們需要在 CSS 文件中加入如下代碼(紅色部分):

#ID1 { background-color: #333; color: #FFF; margin-top: 10px; margin-bottom: 10px; padding-top:1px; padding-bottom:1px; }

或是：

#ID1 { background-color: #333; color: #FFF; margin-top: 10px; margin-bottom: 10px; border-top:1px solid #333; border-bottom:1px solid #333; }

通過增加以上代碼, 便可使瀏覽器重新計算 ID1 的高, 使其為子元素 ID2 的 margin-top/bottom 外緣 (outer top/bottom) 之間的距離, 即 Fig. 3 中 be 的距離.

關于“CSS 的 padding 和 margin 屬性怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注丸趣 TV 行業資訊頻道，丸趣 TV 小編每天都會為大家更新不同的知識點。