CSS中的外邊距(margin)是指元素與其周圍元素之間的距離。我們可以使用CSS中的margin屬性來設置外邊距。
{ margin: 10px; /*設置所有邊的外邊距為10像素*/ }
上面的代碼表示將所有邊的外邊距設置為10像素。我們也可以分別設置上下左右四個方向的外邊距:
{ margin-top: 10px; /*設置上邊的外邊距為10像素*/ margin-right: 20px; /*設置右邊的外邊距為20像素*/ margin-bottom: 30px; /*設置下邊的外邊距為30像素*/ margin-left: 40px; /*設置左邊的外邊距為40像素*/ }
上面的代碼表示將上邊的外邊距設置為10像素,右邊的外邊距設置為20像素,下邊的外邊距設置為30像素,左邊的外邊距設置為40像素。
在設置外邊距時,我們可以使用負值。使用負值的效果是將元素向相應的方向移動。例如:
{ margin-top: -10px; /*向上移動10像素*/ margin-left: -20px; /*向左移動20像素*/ }
上面的代碼將元素向上移動10像素,向左移動20像素。
需要注意的是,當設置外邊距時,如果兩個相鄰的元素都設置了外邊距,它們之間的距離將是它們各自的外邊距之和。例如:
div { margin-bottom: 20px; } p { margin-top: 30px; }
上面的代碼表示一個div元素的下邊距為20像素,一個p元素的上邊距為30像素。這兩個元素相鄰時,它們之間的距離為50像素(20像素+30像素)。
總之,外邊距可以讓我們在布局網頁時控制元素之間的距離,是CSS布局中非常重要的一個概念。
上一篇css中如何控制位置
下一篇css中如何指定類型