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: block;
• display: inline;
• display: none;
• display: 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 觀念釐清：

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

(五) 覆蓋默認顯示值 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;

總結

延伸學習資源及參考