外邊距 內邊距 邊框詳解

2021-10-10 19:47:30 字數 906 閱讀 8120

外邊距(margin)

margin可以設定盒子和盒子之間的距離

若想要盒子水平居中,則必須滿足兩個條件:

(1).盒子必須設定寬度

(2).讓左右外邊距為auto(margin: 10px auto)

若想要讓行內元素或行內塊元素水平居中,則只需要給其父元素新增text-align:center;即可

有關外邊距最經典的問題就是巢狀塊元素垂直外邊距的塌陷

.father 

.son

.box

上述**執行結果如下圖所示:

由上圖可以發現,明明給既給.father設定了margin-top,也給.son設定了margin-top,但是結果只是給.father設定了margin-top,這就是發生了巢狀塊元素發生了垂直外邊距的塌陷

解決辦法:

(1)為父元素設定上邊框(改變了父元素,不推薦)

(2)為父元素設定上內邊距(改變了父元素,不推薦)

(3)為父元素新增overflow: hidden屬性(推薦)

為父元素新增overflow: hidden屬性後,執行結果如下:

內邊距(padding)

如果盒子本身設定了寬高,若設定padding值,會使盒子變大(即使是width=100%,也會改變盒子大小)

但如果盒子本身沒有設定寬高,若設定padding值,盒子大小不會發生改變

邊框(border)

邊框與內邊距一樣,設定之後預設都會改變元素的大小

css 內邊距 外邊距 邊框

1.內邊距css padding 屬性定義元素邊框與元素內容之間的空白區域。例子 padding left 20px 屬性 描述padding 簡寫屬性。作用是在乙個宣告中設定元素的所內邊距屬性。padding bottom 設定元素的下內邊距。padding left 設定元素的左內邊距。padd...

內邊距和外邊距

內邊距,在邊框和內容區之間的空白區域。padding 屬性接受長度值或百分比值 或者auto 不允許為負值 1.四個方向內邊距一致時 padding 10px 元素距離外部父元素給邊框的距離均為10px 2.四個方向還可按著上 右 下 左的順序分別定義各內邊距 padding 10px 5px 10...

內邊距與外邊距

內邊距就是邊框與內容之間的距離 padding top padding right padding bottom padding left padding 上 右 下 左 當省略上右下左中的乙個時,預設與對面的值保持一致,即下對應上 左對應右 我是內容我是內容我是內容 我是內容我是內容我是內容 我是...