CSS 的 margin 屬性

margin(邊距)是一個在CSS中常用的簡單屬性,用於在元素周圍添加空間。 記住: margin 在元素邊框之外添加空間 padding 在元素邊框之內添加空間 具體的 margin 屬性 margin 有四個相關屬性,可以一次性改變單個邊的 margin: margin-top margin-right margin-bottom margin-left 使用這些屬性非常簡單,不容易混淆,例如: margin-left: 30px; margin-right: 3em; 使用 margin 快捷方式 margin 是一個快捷方式,用於同時指定多個邊的 margin,根據輸入的數值個數不同,其行為也不同。 1個數值 如果使用一個數值,那麼該數值將應用於所有邊的 margin:top、right、bottom、left。 margin: 20px; 2個數值 如果使用兩個數值,那麼第一個數值將應用於底部和頂部,第二個數值將應用於左邊和右邊。 margin: 20px 10px; 3個數值 如果使用三個數值,那麼第一個數值將應用於頂部,第二個數值將應用於左右邊,第三個數值將應用於底部。 margin: 20px 10px 30px; 4個數值 如果使用四個數值,那麼第一個數值將應用於頂部,第二個數值將應用於右邊,第三個數值將應用於底部,第四個數值將應用於左邊。 margin: 20px 10px 5px 0px; 因此,順序是頂-右-底-左。 可接受的數值 margin 可接受以任何長度單位表示的數值,最常見的單位是 px、em、rem,但也存在許多其他單位。 它還接受百分比值和特殊值 auto。 使用 auto 來居中元素 auto 可以用於告訴瀏覽器自動選擇 margin,最常用於以下方式居中元素: margin: 0 auto; 如上所述,使用兩個數值時,第一個數值應用於底部和頂部,第二個數值應用於左邊和右邊。 現代居中元素的方法是使用Flexbox及其 justify-content: center; 指令。...