css margin縮寫簡寫

2021-07-15 19:16:29 字數 862 閱讀 8069

margin屬性css樣式,如遇到上下、左右、上下左右等情況我們可以縮寫簡寫優化。

1、只有上下情況縮寫

原始:margin-top:5px; margin-bottom:6px

縮寫簡寫為:margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情況縮寫

原始:margin-left:5px; margin-right:6px

縮寫簡寫為:margin:0 6px 0 5px或margin:auto 6px auto 5px

margin:0 auto;橫向居中;

margin:auto 0;縱向居中;

3、只有三邊情況縮寫

原始:margin-top:5px; margin-bottom:6px; margin-left:4px

縮寫:margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四邊相同值縮寫

原始:margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px

縮寫:margin:5px;

5、四邊不同值縮寫

原始:margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px

縮寫:margin:5px 8px 6px 7px;

6、四邊其中上下值和左右值各相同縮寫

上下相同、左右相同原始:margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px

縮寫:margin:5px 7px;

border英文縮寫 CSS 的簡寫屬性

定義 簡寫屬性是讓你同時設定其他幾個 css 屬性值的 css 屬性。使用簡寫屬性,web 開發人員可以編寫更簡潔 更具可讀性的樣式表,節省時間和精力。css 規範把簡寫屬性定義為作用於同一主題的一組屬性。比如 css 的background屬性就是乙個簡寫屬性,它可以定義background co...

CSS margin合併問題

margin摺疊的產生有幾個條件 垂直方向上毗鄰的box不會發生摺疊的情況 摺疊邊距的計算 當兩個margin都是正值的時候,取兩者的最大值 當 margin 都是負值的時候,取的是其中絕對值較大的,然後,從 0 位置,負向位移 當有正有負的時候,先取出負 margin 中絕對值中最大的,然後,和正...

css margin 負值應用

class box class ul class li 列表 1div class li 列表 2div class li 列表 3div div div box ul.li 效果如下 此時第三個列表右側有 20px 的間距,我們可以通過設定負值來實現真正的兩端對齊效果 box ul.li 效果如下...