CSS中的margin和padding是非常重要的兩個概念,它們都能夠控制元素與元素之間或者元素與父元素之間的距離,下面我們來分別了解一下margin和padding。
.box{ margin: 10px; padding: 20px; }
上述代碼中的margin和padding都是經常用到的屬性,其中margin指的是元素與元素之間或者元素與父元素之間的距離,“外邊距”,而padding則是指元素內容與元素邊框之間的距離,“內邊距”。
.box{ margin-top: 20px; margin-right: 30px; margin-bottom: 20px; margin-left: 30px; }
上述代碼中展示了margin的四種屬性值,分別對應上下左右四個方向,可以是具體像素值,也可以是百分比。如果只有一個屬性值,代表四個方向的margin都是這個值。
.box{ padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; }
同樣地,上述代碼中展示了padding的四種屬性值,具體含義與margin是類似的。
總之,在網頁布局中,margin和padding的使用頻率是非常高的,學習和熟練掌握這兩個屬性對我們進行頁面設計和布局上具有非常大的幫助和意義。