行內元素inline與區塊元素block

每個元素都有默認的display值

區塊（block）元素

• 區塊(block)元素都會是單獨一行。
• 高度，行高以及頂和底邊距都可控制。
• 默認情况下，其寬度自動填满其父元素寬度，即寬度100%。
• 可以設置寬高 width hight

常見的區塊（block）元素

div、p、h1~h6、ul、ol、li、form、table、hr…等等

行內（inline）元素

• 相臨的行内元素会排列在同一行，直到一行排不下，才會換行，其寬度隨元素的内容而變化。
• 設置寬高無效，只能由内容撑起来，即行内元素設置width，height屬性無效。
• 水平方向的padding-left 、padding-right、margin-left、margin-right都會產生效果，但上下方向的padding-top、padding-bottom、margin-top 、margin-bottom不會產生邊距效果（設置上下margin、padding無效，左右padding 、margin有效）。

常見的行內（inline）元素

span、em、i、b、strong、a、img、input、br、select、textarea、bdo、sub、sup…等等。

區塊元素可以包行内元素

大多數 HTML 元素 可以包含其他 HTML 元素。

• 區塊元素可以包含行内元素或者某些區塊元素。
• 行内元素只能包含行內元素，不能包含區塊元素。

特例元素

• a無所不能，但a不能包含它本身。
• p標籤不能包含區塊元素。
• h1~h6、p、dt標籤：只能包含行內元素，不能再包含區塊元素。
• li很强大，它可以包含div，甚至可以包含它的父元素ul或者ol。

空元素特點

• 没有内容的 HTML 元素，稱為空元素。
• HTML元素的内容是開始標籤與结束標籤之間的内容，而某些HTML元素內為空，那些含有空内容的HTML元素，就是空元素。
• 單標籤，只有開始標籤，没有结束標籤

空元素常見包括

br
hr
img
input
link
meta