HTML 元素的顯示方式

在之前學習 HTML 的內容中，我們會發現每個元素預設的特定都不太一樣，有些會獨佔一整行的空間，例如 <p>、<div>，有些則是會接續上個元素在同行排列，例如 <a>、<span> 等。這是因為 <div> 屬於區塊元素，而 <a> 則屬於行內元素，接下來就讓我們介紹不同種類元素間的差異吧！

行內元素 inline

• 元素寬高由內容撐開
• 相鄰的元素會顯示在同一行，若一行無法顯示則在下一行繼續由左到右排列
• 無法用 CSS 設定寬高
• 代表元素：<a>、<span>、<label> 等文本相關標籤

區塊元素 block

• 在頁面中獨佔一整行，預設寬度為父元素的最大寬度，預設高度需要用內容撐開
• 可以用 CSS 指定寬高
• 元素由內而外依序由 content ( 內容 )、padding ( 內間距 )、border ( 框線 )、margin ( 外間距 ) 構成
• 代表元素：h 系列、<p>、<div>、<table>、<ul>、<form> 等

行內區塊 inline block

• 元素寬高由內容撐開
• 相鄰的元素會顯示在同一行，若一行無法顯示則在下一行繼續由左到右排列
• 可以用 CSS 設定寬高
• 同時擁有行內和區塊元素的特性，既有行內元素的排版，又可以指定寬高
• 代表元素：<img>、<td>、<input>、<select>、<button>、<iframe> 等

修改元素顯示方式

上面所說的元素顯示方式我們可以透過 display 來進行修改，主要有 none、inline、inline-block、block 幾種常見的屬性值。

• none：使元素被隱藏
• inline：將元素變為行內顯示
• inline-block：將元素變為行內區塊顯示
• block：將元素變為區塊顯示

範例：

a {
    display: inline-block; /* 將 a 從 inline 改為 inline-block，可設寬高且在同一行 */
    background-color: lightblue;
    height: 60px;
    width: 400px;
}
div {
    display: inline; /* 將 div 從 block 改為 inline，與前面的元素在同一行 */
    background-color: lightgreen;
    height: 40px; /* inline 元素無法設定寬高，CSS 失效 */
}
span {
    display: block; /* 將 span 由 inline 改為 block，獨佔一行且可設定寬高 */
    background-color: lightsalmon;
    height: 60px;
}

上一篇：[快速入門前端 24] CSS 常見屬性(4) 背景和滑鼠動態屬性
下一篇：[快速入門前端 26] CSS Box Model 盒子模型
系列文章列表：[快速入門前端] 系列文章索引列表