在CSS中,調整元素之間的距離是非常常見的需求。實現這一點有很多方法,其中最簡單的方法就是使用CSS的margin屬性。margin屬性可以設置元素的邊緣到其周圍元素的距離。
.example { margin-top: 10px; margin-bottom: 20px; }
上面的代碼將給class為“example”的元素設置一個上邊緣與其周圍元素的距離為10像素,下邊緣與其周圍元素的距離為20像素。同樣,我們可以設置左右邊緣與其周圍元素的距離。
除了margin屬性,還有一種方法是使用CSS的padding屬性。padding屬性可以調整元素內部內容與其邊緣之間的距離。
.example { padding-top: 10px; padding-bottom: 20px; }
上面的代碼將給class為“example”的元素設置一個內部內容與其上邊緣之間的距離為10像素,內部內容與其下邊緣之間的距離為20像素。同樣,我們可以設置左右內邊距。
需要注意的是,margin和padding屬性都可以使用“不同方向間距”的語法,例如:margin: 10px 5px 20px 5px;表示上、右、下、左四個方向的間距分別為10像素、5像素、20像素、5像素。
最后,我們需要注意的是,距離不會疊加。例如,如果一個元素的margin-top為10像素,另一個元素的margin-bottom為20像素,則它們之間的距離并不是30像素,而是20像素,因為它們之間的距離是由它們的邊緣中最大的那個決定的。
上一篇css個性滾動條
下一篇mysql查lock