認識HTML標籤基本顯示模式的區分

block

inline

inline-block

h1 ~ h6 , p , ul , ol , li , div
header, footer, nav, main, aside, section
article, figure, figcaption . . .

a
span 
. . .

img
iframe
audio, video, embed
. . .

預設:寬度100% 高度0
position預設為 static , 沒有定位的能力
需要規律左右分欄時, 設定 float
需要有定位能力時, 設定 position
可以設定 padding 與 margin , 特性如下圖

一行中局部內容
無法設定寬度、高度

padding四周可以設定
margin左右可以設定
——–表示物件外邊界

margin上下無法設定

一行中的局部區塊
可以設定寬度、高度
可以設定padding、margin
但仍屬於所在區塊的內容
所以擁有行高的存在

參考範例

 

認識區塊的特性