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

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.

🙋🏻‍♀️ 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).

(二) Inline Elements

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

(三) 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 會和其他行內元素重疊，如下圖：

在 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.

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.

問題紀錄

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

💆🏻⏳ 習作時間

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

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

總結

延伸學習資源及參考