內聯元素與塊元素 邊框屬性區別
阿新 • • 發佈：2021-07-29
內聯元素和塊級元素的區別是新手必須要掌握的知識點。大家可能平時注意塊級元素比較多。所以這裡重點讓我們來講講常見的width height margin padding 對inline元素的影響。
測試程式碼（在谷歌瀏覽器執行版本 49.0.2623.87 m，火狐效果同谷歌）
1 <style type="text/css">
2 * {
3 margin: 0;
4 padding: 0;
5
6 }
7 body{
8 font-size: 12px;
9 font-family: "微軟雅黑";
10 }
11 span{
12 width:500px;
13 height: 500px;
14 border: 1px solid red;
15 background: yellow;
16 margin-top:10px;
17 margin-bottom: 10px;
18 margin-left:10px;
19 margin-right:10px;
20 padding-top:100px;
21 padding-bottom: 100px;
22 padding-left:10px;
23 padding-right:10px;
24 box-sizing:border-box;
25 }
26 div{
27 color:orange;
28 background: blue;
29 height: 100px;
30 }
31 </style>
32 </head>
33
34 <body>
35 <div>藍色區域的我是div 藍色區域的我是div 藍色區域的我是div</div>
36 <span>i am inline box</span>
37 </body>
inline：
width和height 可以看成物理屬性，對內聯元素沒有影響。 能夠影響它寬高的為其本身的內容。
margin-top:10px;margin-bottom: 10px;無效果
margin-left和margin-right;起作用。
padding屬性就比較特別了。
padding-left;padding-right同樣有效果,與塊元素效果相同。
padding-top和padding-bottom不會影響它的高度，但是會影響他的背景高度。
單個inline元素樣式（隱藏了上方的div）
上方加入塊級元素div後的樣式
block
塊元素就沒什麼好說了。
width,heigth對其產生影響。
塊元素實際寬度 = width+padding-left+padding-right+border（沒有設定box-size的情況下）
注意
1.css3中box-size屬性的的出現對塊元素的實際寬度的影響。（ps.這是個好工具）
2.雖然對於inline元素 margin-top之類的沒有影響但是在谷歌和火狐的偵錯程式中的佈局中仍然是有顯示的。
關於ie（這裡只測試了 ie7-ie9）
1.僅在ie7中 inlinede的padding 屬性沒有作用。如圖
2.僅在ie9中，開發工具中的佈局圖，顯示的寬高為css中設定的width，height值，而不是內聯元素本身的值。在除錯中要注意。如圖