如何設置CSS的邊距和填充，以及涼爽的佈局技巧

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

密鑰概念：

CSS框模型是基本的：CSS元素是矩形框，其尺寸由內容，填充，邊框和邊緣定義。
• 盒子尺寸通常會使初學者感到困惑。默認的
將填充物和邊界添加到元素的寬度和高度上，通常會導致佈局問題。 設置
• 是一個常見的解決方案。 box-sizing: content-box box-sizing: border-box> CSS精確控制元素所有四個側面的填充物和邊緣。填充圍繞內容；邊距是外層，在元素和其鄰居之間創造空間。
>
• 邊緣和填充物具有多功能應用，包括將元素集中在容器中，元素間距和維護圖像寬高比。掌握這些技術可以解決許多佈局問題。

CSS框模型解釋了：

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

content（元素的內部文本或圖像）

填充（內容和邊界之間的空間）
邊界（元素的輪廓）
邊距（元素和其他元素之間的外部空間）
• 以下圖說明了以下圖：

了解CSS盒子的尺寸：

> 盒子尺寸是CSS新移民的常見混亂來源。 由於增加填充物和邊界，兩個50％的寬度元素可能不適合其容器。 默認情況下，填充和邊界會增加元素的總寬度。 為了簡化佈局，設置

，以便在指定的寬度中包含填充和邊框。 CSS重置通常在全球範圍內應用

：

>

box-sizing: content-box實驗交互式演示以鞏固您的理解。 box-sizing: border-box 在CSS中設置填充物：border-box

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

>使用

，

，，的控制填充或shorthand

屬性：

> padding-top padding-rightpadding-bottom在CSS中設置保證金：padding-leftpadding

類似於填充物，使用

/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 2em 4em;

/* Top | Horizontal | Bottom */
padding: 1em 20px 2em;

/* Top | Right | Bottom | Left */
padding: 10px 10% 2em 15%;

，

，，，或速記

屬性：

> margin-top margin-right邊距在元素之間創造空間。 margin-bottom 在

• 單位：避免在響應式設計中的邊緣和填充物中避免絕對單位（像素）。百分比或相對單元（EM，REM）更好地適應屏幕尺寸和字體更改。

根據所使用的單位（基於母體寬度，基於元素字體大小，基於視口尺寸的視口單元），
• >單元計算：瀏覽器瀏覽器以不同的單位計算邊距和填充。

  ）。

>邊緣折疊：
• 相鄰兄弟姐妹的頂部和底部邊緣可以塌陷成一個邊緣（兩個較大的邊緣）。 添加填充或邊框阻止了這種情況。

  >

實用應用：

中心：

• 中心塊級元素水平使用>。 margin: 10px auto;

>間距元素：
• >使用邊距與空間元素分開，特別有用。

維持縱橫比：
• 在父元素上使用填充頂部為一個百分比（根據所需的縱橫比計算）：0以維持圖像縱橫比。

  >

結論：

本教程為理解和使用CSS邊緣和填充提供了堅實的基礎。 進一步探索高級技術將增強您的CSS技能。 >

以上是如何設置CSS的邊距和填充，以及涼爽的佈局技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！