1. 程式人生 > >CSS 塊級元素block , 行內元素 inline,以及行內塊級元素inline-block

CSS 塊級元素block , 行內元素 inline,以及行內塊級元素inline-block

block元素(div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等)

在這裡插入圖片描述

從瀏覽器的顯示結果可以看出,塊級元素新開啟一行(即使是設定了width屬性也是獨佔一行)、儘可能撐滿父級元素的寬度,可以設定width和height屬性;table元素瀏覽器預設的display屬性為table。

inline元素(span、img、a、lable、input、abbr(縮寫)、em(強調)、big、cite(引用)、i(斜體)、q(短引用)、textarea、select、small、sub、sup,strong、u(下劃線)、button(預設display:inline-block))
相鄰的行內元素不換行,寬度即為內容的寬度、padding的4個方向都有效(從span標籤可以看出)、margin只有水平方向有效、不可以設定width和height屬性。行內塊元素表現其實和行內元素一樣,只是其可以設定width和height屬性