html 父子外邊距 兄弟內邊距 趣味邊框

2021-08-21 23:47:37 字數 1221 閱讀 9133

理解父子之間用padding,兄弟之間用margin。

圖中外部div(a)裡面包含兩個div(b和c)。

①②③⑤均為父子元素之間的間距 ④為兄弟之間的元素

使用「父子內邊距,兄弟外邊距」。

①②③⑤,父子元素之間的空隙,均使用padding值撐開。

④兄弟之間使用margin值撐開。

a元素

witdth:200px;

padding:73px 55px;

border:3px solid #555;

b元素

height:194px;

margin-bottom:42px;

border:3px solid #555;

c元素

height:194px;

border:3px solid #555;

採用的都是外邊距

①~⑤,均使用margin值撐開。

a元素

witdth:310px;

border:3px solid #555;

b元素

width:194px;

height:194px;

margin:73px 55px 42px;

border:3px solid #555;

c元素

width:194px;

height:194px;

margin:0px 55px 73px;

border:3px solid #555;

使用第一套方案比較精簡。另外在ie6等瀏覽器不會出現什麼問題(第二套方案會觸發ie6的雙倍邊距bug)。

外邊距在布局中比較容易觸發一些布局問題。

記住 margin padding 有乙個值是上下左右

兩個值是 上下 左右

三個值是 上 左右 下。

title>

內邊距和外邊距

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

內邊距與外邊距

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

css 內邊距 外邊距 邊框

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