CSS之行內元素與塊級元素

默認情況下塊級元素：

 

div, p, ul,li,header,footer,section,article 等等

 

默認情況下行內元素：

a, span,img 等等

 

因為文檔流是LRVH (從左到右，上到下的顯示)，對於塊級元素是會（橫向方向）填滿它的包含元素（父級元素的），而行內元素則不是，它的所有子元素會在一行顯示，（如果所有子元素的寬度超過了其父容器的寬度，則會自動換到下一行）

區別：

塊級元素對於盒模型（padding,margin,border）設置所有屬性（padding-left;padding-right;padding-top;padding-bottom;margin-left;margin-right;margin-top;margin-bottom;border）都是有效果的

 

 但是將其變換成行內元素（display:inline）,只有margin-left,margin-right,padding-left,padding-right生效，包含元素的高度跟內容有關（包裹住內容，設置margin-top,margin-bottom,padding-top,padding-bottom,包括border的厚度設大也是不會改變行高的）

display:inline-block;

先將被包含元素按display:inline,行級（左到右）排列，排不滿則（上到下）排列到下一行，並且相比於display：block，行與行之間會自動根據系統產生一個行間距（同樣如果設置了margin值則會覆蓋系統計算的行間距，對於單個被包含元素來說符合盒模型，margin,padding,border都是有效果的）