CSS中的外邊距是指元素與元素之間的距離。包括左右外邊距,上下外邊距。
.example { margin-left: 10px; margin-right: 20px; }
上面的代碼就是在定義一個class為example的元素,并為其定義了左外邊距為10px,右外邊距為20px。
左右外邊距的作用是可以讓元素在頁面布局中占據指定的區域,并與其他元素保持一定的距離。
需要注意的是,如果一個元素設置了左右外邊距,并且它的寬度也被設置了,那么元素會在剩余的空間中居中展示。
.example { width: 200px; margin: 0 auto; }
上面的代碼將一個寬度為200px的元素在水平方向上居中展示。
此外,左右外邊距還可以用于容器元素的布局控制。通過為容器元素設置左右外邊距,可以將其中的所有元素向左或向右移動。
.container { margin-left: 20px; margin-right: 20px; }
上面的代碼將一個class為container的容器元素向右移動20px,可以用于實現頁面整體布局的調整。
總體來說,左右外邊距是CSS中非常重要的布局屬性,可以用于元素的展示布局以及整體頁面的調整。