如何設置CSS的邊距和填充，以及酷的佈局技巧” data-gatsby-head =' true”/> Christopher Nolan 發布： 2025-02-09 13:05:16 原創 746 人瀏覽過

>本教程闡明了CSS邊距和填充之間的區別，說明了它們對網頁元素間距的影響。 我們將探索保證金崩潰，不同單位在響應式設計中的含義，並以CSS保證金和填充佈局技術結束。

密鑰概念：

CSS框模型是基本的：元素是由內容，填充，邊框和邊緣定義的矩形框。
• 通常會使初學者感到困惑。默認值
• 將填充物和邊界添加到元素的寬度和高度。 box-sizing是一種常見的解決方案，可確保填充和邊界包含在指定的寬度和高度中。 box-sizing: content-box box-sizing: border-box> CSS精確控制元素所有四個側面的填充物和邊緣。填充圍繞內容；邊距是外層，在元素和其鄰居之間創造空間。
>
• 邊距和填充物提供多功能應用：核心元素，間距元素和維持圖像寬高比。 掌握這些技術可以解決許多佈局挑戰。

了解CSS框模型：

> css元素是矩形盒子，由：組成：

content

padding
邊界
邊距
• 內容集中存在；填充內容；圍繞填充物的邊界；邊緣形成最外層的。

CSS盒子尺寸解釋了：

>

是常見的混亂來源。 由於增加填充物和邊界，兩個50％的寬度元素可能不適合其容器。 當添加填充或邊框時，默認值會增加元素的總寬度。

>通過在指定寬度內包含填充和邊界來簡化佈局。 許多CSS重置所有元素都使用

：box-sizing>

box-sizing: content-box（注意：存在更簡單的重置，但這允許選擇性異常。 box-sizing: border-box>探索MDN或規範上的更多資源。 互動演示增強了實際理解。 border-box 在CSS中設置填充物：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

填充是使用>，

，

，box-sizing，

或速記

屬性：

codepen演示說明了這些示例。 觀察刪除

。 padding-top的影響 padding-rightpadding-bottom在CSS中設置保證金：padding-leftpadding

類似於填充物，使用margin-top>，margin-right，margin-bottom，margin-left，或速記margin屬性：>

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

codepen演示顯示帶有漂浮元素的邊距使用。 在

單元選擇：

避免在響應式設計中的邊緣和填充物中避免絕對單位（像素）。 基於百分比的值適應屏幕尺寸的變化。 單位尺寸為字體大小。視口單元（，，

，

）基於視口大小。 單位計算：em>百分比相對於父元素的寬度。 vw>單位相對於元素的字體大小。視口單元相對於視口尺寸。 vh vmin vmax邊緣崩潰：>相鄰的同胞元素的頂部和底部邊緣可以塌陷成一個邊緣。 親子邊緣也可能崩潰。 添加填充或邊界可以防止這種情況。

>

實用應用：em

居中元素：>使用

在其父母內水平中心元素。

>>間距元素：

邊距有效地太空元素，對flexbox特別有用。

• 維持寬高比：將父的高度設置為零，並使用（根據縱橫比計算）維持圖像寬高比。 margin: 10px auto;
• 結論： 該教程區分了邊緣和填充，展示了其速記語法和適當的單位。 提供了實用的佈局應用程序和更多資源。 通過高級技術來增強您的CSS技能。
• FAQS： padding-top

邊緣與填充：邊距是外部空間；填充是內部空間。

設置值：

>使用

>和>具有各種單位的屬性（像素，百分比，，

）。

）。 在
• 負值：負值均可允許。
>。
• value：margin padding用於水平中心元素水平元素。 em rem
>百分比值：
• 百分比是相對於父母的寬度。

以上是如何設置CSS的邊距和填充，以及酷的佈局技巧” data-gatsby-head =' true”/>