CSS 習作｜The display Property：辨識 block、inline、inline-block 三胞胎

更新於 2023/07/16發佈於 2023/05/16閱讀時間約 14 分鐘

Intro：The display Property

w3schools：
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.

Display 是一種 CSS 屬性，指定「是否 / 如何」顯示元素，每一個 HTML element 都有預設的 display value，而它的「value」是什麼，則取決於它是什麼類型的 HTML element。
所以！瞭解各個 HTML element 的預設屬性很重要！很重要！很重要！
🚩 瞭解 HTML element 預設屬性

資料來源

🙋🏻‍♀️ CSS Syntax 複習

CSS Syntax

w3schools：
A CSS rule consists of a selector and a declaration block.

CSS 語法說明

CSS Syntax 由一個選擇器 ( Selector ) 和一個聲明塊 ( declaration block ) 組成。
Selector 選擇器指向要設置樣式的 HTML 元素。
Declaration block 聲明塊包含一個或多個以分號分隔的聲明。
每個 declaration block 都包含一個 CSS 屬性名稱和一個值，以冒號分隔。
多個 CSS 聲明用分號分隔，聲明塊用花括號括起來。

Display value

Display 是一種 CSS 屬性，大多數的元素其默認的 display value 是「block」或「inline」，常見的 value 值有以下這些：

display: block;
display: inline;
display: none;
display: inline-block;

接下來要各別介紹「block」、「inline」、「inline-block」之間的不同特性！

(一) Block-level Elements

w3schools：
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Block-level Elements 總是從一個新行開始，並佔據可用的整個寬度（盡可能向左和向右延伸），如下圖呈現：

<div> element 具有 block 屬性

且 block 可以被設置 width、height，下圖的演示為寬高設置 100px，使內容看起來是黃色正方形。

block 可以設置 width、height

擁有預設 block 值的 HTML Element
Examples of block-level elements：
<div>、<h1> ～ <h6>、<p>、<form>、<header>、<footer>、<section>。

(二) Inline Elements

w3schools：
An inline element does not start on a new line and only takes up as much width as necessary.

Inline Elements 不會從新行開始，只會佔據必要的寬度。特別注意的是，具有 inline 屬性的元素，並不能為它添加 width 或 height。

Examples of inline elements：<span>、<a>、<img>。
另外我們也可以注意到 <img> 元素和 <span>、<a> 元素沒有對齊。

(三) Inline-block

w3schools：
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

差異：inline-block 與 block、inline 之間的比較

與 inline 相比，inline-block 允許在元素上設置寬度和高度。
此外，對於 display: inline-block，頂部和底部邊距/填充會受到尊重，但對於 display: inline 它們則不然。
與 block 相比，主要區別在於 inline-block 不在元素後添加換行符，因此該元素可以緊挨著其他元素。

💡 Inline 觀念釐清：

可以在 inline 行內元素的頂部和底部添加 padding，但是 padding 不會影響周圍其他行內元素的間距，所以 padding 會和其他行內元素重疊，如下圖：

inline element 加上 padding: 後，padding 不會推擠周圍的 inline elements，反而會覆蓋其他的 inline elements。

在 Box Model 的概念下，要計算元素的完整大小，必須計入 padding、 borders、margins 等。而 Box Model 是隨著元素的累加而不斷堆疊，最父層的 box 會受內部的 box 內容推擠。

而 inline element 則有不同的情境，當他被加入 padding-top、padding-bottom 時，他父層（或外層）的元素不會被推擠，反而會蓋住周圍的元素。

🧙🏻‍♀️ 實驗：使用 <a> inline element，宣吿不同 display: value

在以下的範例中，我對 <a> 宣告不同的 display: value 來設計按鈕，一起來觀察不同的 value 對 <a> 以及周遭元素造成什麼效果及變化。

➊ 使用 <a> 標籤，預設 inline
在具有 inline 屬性的 <a> 標籤中，無法放置 block element，但是放置在 <a> 裡的 <div>，其 <div> 裡面內含的文字卻受到 a:hover 的影響，在滑鼠 hover 時變色了。

➋ 將 <a> 標籤宣告為 display: block;

將帶有 inline 屬性的 <a> 標籤，將其顯示方式改變為 display: block，讓 <a> 標籤以 block 做呈現，這也使 <a> 標籤能夠添加 width 和 height 的值，在畫面上也另起一列，並且盡可能向左右延伸。

➌ 將 <a> 標籤宣告 display: inline-block;

被設置成 inline-block 的 <a> 標籤，無法放置 block element，且放置在 <a> 裡的 <div> 文字，也沒有讀取 text-decoration: none;

(五) 覆蓋默認顯示值 Override The Default Display Value

w3schools：
As mentioned, every element has a default display value. However, you can override this.
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

如前所述，每個元素都有一個默認顯示值。但是，我們可以覆蓋它，將內聯元素更改為塊元素，反之亦然，對於使頁面看起來具有特定方式並且仍然遵循 Web 標準很有用。

注意，顯示屬性的規則與條件：

w3schools：
Note：Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

設置元素的顯示屬性只會改變元素的顯示方式，而不是元素的類型。
因此，一個帶有 display: block 的內聯元素；不允許在其中包含其他塊元素。

問題紀錄

在「Override The Default Display Value」的觀念下，一個帶有 display: block 的 inline element，會允許在其中包含其他 block elements 嗎？
設計具有超連結屬性的按鈕時，應該如何架構 HTML element 和 CSS Property 呢？
inline-block 與 block、inline，它們分別使用的時機與合適的組合是什麼呢？

💆🏻⏳ 習作時間

習作題目：運用 CSS Display 屬性，設計一個具有 LOGO 、按鈕的選單。
( 此習作練習不具有 RWD )

習作時間：運用 CSS Display 設計一個選單

習作演練心得：

撰寫 HTML 與 CSS 時，需注意使用的 HTML element 本身具有何種 (或預設) display 屬性，例如 <a>、<img> 是具有 inline 屬性的 element，而 <ul>、<li> 則是具有 block 特性的 element。

並且，瀏覽器預設樣式會使相同的 HTML element 在不同的瀏覽器有不同的呈現，因此，需要 CSS Reset 來覆蓋瀏覽器內建的 HTML element 樣式，這邊也參考六角學院的 CSS Reset - 清空瀏覽器預設樣式。

在習作中，使用 <ul>、<li> 來包住 <a> 設計選單，理由是：

區塊元素可以包含行内元素或者某些區塊元素行。
内元素只能包含行內元素，不能包含區塊元素。

以 <a> 標籤設計按鈕時，宣告 <a> display: block，並針對 <a> 設置 padding，這邊不對 <li> 設定寬高，反而是透過在 <a> 上添加 padding 屬性，目的是使 <a> 擁有內距，增加連結點擊範圍。

將 <img> 宣告 display: block，並設置 img { width: 100%; } ，這使 <img> 可以隨著父層內距及外距的增加或內縮，來自適應寬高。
這邊我用 . test_box 做了演示，試著將 img 的 width: 100% 拿掉，會發現父層的 .test_img 盒子被蒲公英圖片撐開了。

另外，在練習 display 的過程中，運用了一些本篇筆記沒有紀錄的內容，關於排版的練習與使用，這邊是參考 justify-content - 決定主軸對齊方式：

display: flex;
flex-direction: eow;
justify-content: space-between;
align-items: center;

總結

透過本次習作，能夠瞭解 HTML element 基礎概念，並且在規劃 HTML、CSS 時理解以前看不到的盲點，希望這篇筆記也對初學 CSS Dispaly 的你有所幫助。
如果你喜歡本篇筆記，歡迎一起練習本篇習作題目：運用 CSS Display 屬性，設計一個具有 LOGO 、按鈕的選單。
Practice make perfect，我是正在自我習作中的 Draw，我們下篇見 🙇🏻