A-Ming-Design

Inline 及 Block 的差異

2019 年 8 月 28 日

在網頁切版中,最常用的也就是「inline」和「block」。若能清楚的搞懂它,往後再切版會有很大的幫助。以下將會帶圖來做簡略的介紹。

【行內元素(Inline)】
span、a、br、img...等皆屬Inline。
其特性在於→「無法調整寬高」、「但不會佔據一整列的寬度」。

【區塊元素(Block)】
div、ul、li、p、hr...等皆屬Block。
其特性在於→「可調整寬高」、「但會佔據一整列的寬度,以致無法放其它東西」。若欲了解更多詳細項目,請連結至 w3school 網站參照。

說明 Inline/Block-CSS 以 img 而言,誠如上面所述,圖片係屬 inline 的標籤,因此若不作設定,每張圖預設都是由左往右排列;反之,當我們在 img 標籤上多一個 display:block 時,每一列也就僅能放置一張圖,而變成由上往下排列,如下圖所示。 Inline/Block樣試圖

文章分類

  • RWD
  • CSS
  • 其它