CSS中的邊距是一種常用的設置方式,常常用于調整元素之間的間距或元素內部的間距。邊距通常分為四個參數,分別是上、右、下、左,它們分別代表了元素的上、右、下、左四個方向的間距。
/* 語法 */ margin: 上 右 下 左; /* 例子 */ margin: 10px 20px 30px 40px;
上、下兩個參數代表的是元素的垂直邊距,而右、左兩個參數代表的是元素的水平邊距。下面通過實例來更好地了解四個參數分別代表的含義。
/* 實例 */ div { margin: 20px 40px 60px 80px; } /* 詳解 */ 上邊距:20px 右邊距:40px 下邊距:60px 左邊距:80px
需要注意的是,當只有兩個參數時,它們分別代表的是元素的上下邊距和左右邊距。而當只有一個參數時,代表的是4個方向的邊距都相等,這個參數可以是一個數值、auto(自動調整)或inherit(繼承父元素的值)。
/* 實例 */ .content { margin: 20px auto; } /* 詳解 */ 上邊距:20px 右邊距:均為auto 下邊距:20px 左邊距:均為auto
邊距是使用最廣泛的CSS樣式之一,熟練掌握邊距的四個參數的含義,才能更好地控制頁面的布局和樣式。