內邊距和外邊距
阿新 • • 發佈:2019-02-03
padding–內邊距
內邊距,在邊框和內容區之間的空白區域。
padding 屬性接受長度值或百分比值(或者auto),不允許為負值
1.四個方向內邊距一致時:
padding:10px; //元素距離外部父元素給邊框的距離均為10px
2.四個方向還可按著上、右、下、左的順序分別定義各內邊距:
padding:10px 5px 10px 5px; //各內邊距單位不統一也可以
3.分別定義上下、左右內邊距:
padding:10px 5px; //前邊的值定義上下內邊距,後邊的值定義左右內邊距
除了同時定義四個方向的內邊距外,還可單獨定義某一方向的內邊距:
- padding-top
- padding-right
- padding-bottom
- padding-left
程式碼展示:
padding-top:0px;
padding-right:5px;
padding-bottom:10em;
padding-left:5%;
注意:
內邊距,不管是上下還是左右,如果要使用百分比定義的話,都是根據父元素的width屬性計算的,這點兒很容易掉入誤區:上下根據height,左右根據width
margin–外邊距
圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的“空白”。
外邊距的設定規則同內邊距。
另外,我們還可以利用margin屬性,做水平居中控制:
margin :0 auto;