CSS 語法 14:顯示 display, inline, block, inline-block

顯示 display

display 常見的屬性有:

<td>元素為區塊,沒有特別設定的話,下一個 block 會換行,可以設定 height, width 等屬性。<td>元素為區塊(block),可設定 height, width 等屬性,但是以並排顯示。

inline 元素並排顯示,元素的大小依其內容決定,無法設定 height, width, margin 等屬性
block 下一個元素會換行,可以設定 height, width 等屬性
inline-block 元素為區塊(block),可以設定width, height 等屬性,但是並排顯示。
none 元素不顯示,也不佔有版面空間。
gride 格線排版
flex 彈性盒子佈局

HTML 元素 (tag) 屬性

HTML 元素有些屬於 inline (預設並排顯示) 有些屬於 block (下一個元素自動換行)

inline 屬性 <span> <b> <a> <img> <i> <iframe>
block 屬性 <p> <div> <h1> <h2> <h3>…

* block 屬性如果沒有特別設定寬,會以寬100%為預設。

block

<style>
.ABC {
display: block;
background-color:#0099cc;
width:50px;
height:20px;
border:1px black solid;
}
.abc {
background-color:#ff9900;
width:50px;/*span本身為inline元素,因此無法宣告寬高*/
height:50px;
padding:5px;
border:1px black solid;
}
</style>
<span class="abc">a</span><span class="abc">b</span><span class="abc">c</span>
<span class="ABC">A</span><span class="ABC">B</span><span class="ABC">C</span>

abc
ABC

上面的例子可以看到,當span 沒有被設定為 display:block; 時,它維持 <span>原有的 inline 屬性,並排顯示。
當 span 使用 display: block 時,他變成區塊屬性,下一個元素自動換行,並且可以設定 height, width

inline

inline 屬性宣告方式和上一段的 block 屬性一樣:當我們把 block 屬性宣告為 display: inline,它們會變成並排顯示。

inline-block

如果我們想要定義一些區塊的寬和高,同時又需要他們並排顯示,就需要使用到 inline-block 屬性。可以參考後面章節:「媒體類別」的例子。

gride 和 flex 由於篇幅較長,由另外兩個章節說明。