html 父子外邊距 兄弟內邊距 趣味邊框
阿新 • • 發佈：2019-02-09
理解父子之間用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 有一個值是上下左右
兩個值是 上下 左右
三個值是 上 左右 下。
趣味邊框
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border-width: 50px;
border-style: solid;
border-color: red black green yellow 圖片：
從box和boxa可以看出來 邊框是從兩個角45°延伸出來的 最後會交叉於一點
參考書籍《html5佈局之路》