[快速入門前端 25] HTML 元素的 Display 方式

display css 前端新手村

Doris 2023-06-05 17:11:39 ‧ 1303 瀏覽

分享至

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;
}