行內元素(inline)&區塊元素(block)
CSS規範規定,每个元素都有display屬性,每個元素都有默認的display值。
display:block;、display: inline-block;
block(區塊)元素特性:
- 會占滿父元素的寬度(=區塊元素會另起一行)。
- 高度,行高以及頂和底邊距都可控制;
- 寬度會自動填满父元素寬度,(寬度100%)
- 可以設置寬高 width、hight
區塊元素的標籤:div、p、h1~h6、ul、ol、li、dl、dt、dd、form、table、hr、blockquote 、address、menu等等。
blockquote:區塊引用文。
display: inline;
inline(行內)元素特性:
- 只有自己本身寬度,和其他元素都在一行上。
- 行内元素會排列在同一行,直到排不下,才會換行,寬度隨元素的内容而變化。
- 設置寬高無效,只能由内容撑起来,所以行内元素設width,height屬性無效。
- 設定margin時只有水平(左右)有效,垂直(上下)的方向是無效的。
(padding則都有效果。)
行內元素的標籤:span、em、i、b、strong、a、img、input、br、select、textarea、q、bdo、sub、sup...等等。
q:行內引用文。
display補充說明:
- 想要將預設為display:block;並列時,使用display: inline;、display:inline-block;
- 如果像要將inline變成區塊則用display:block;、display:inline-block;
- 至於display:inline-block;使用時機下面舉個例子。
例如:
<a>連結按鈕問題inline-block
(這是我在剛開始做連結按鈕時常出錯的地方)
總結:適時使用display:block、inline、inline-block;再配合margin、padding、width、height等等有助於排版問題。
另外把li變成inline(項目符號會消失)。