iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
1
自我挑戰組

前端新手進化史系列 第 2

大角頭 inline

文章將陸續整理並更新至個人部落格

版面是由各個元素所組成,所以切版前先來跟 html 元素中的兩大角頭拜一下碼頭吧!

html 中的元素在預設下大致可劃分為二大類:

  • inline element (display: inline)
  • block element (display: block)

須留意的是,inline 元素中又有些許部分是屬於替換元素 (Replaced element),而替換元素與一般 inline 元素的特性又略有差異。這篇將先介紹什麼是 inline 元素,包括 inline 元素的基本特性以及 inline 元素有哪些。至於 block 元素及替換元素會在之後的文章另作介紹。

https://ithelp.ithome.com.tw/upload/images/20190917/20120740RdcdXd4NZx.png


一、inline 元素

  • display 屬性的值為 inline
display: inline;

<span>span 是 inline 元素</span>
<span>會水平排列</span>
<span>~~~</span>


  • inline 元素的寬高由其內容決定,無法透過 width 和 height 屬性來調整寬高 (替換元素例外)。

  • inline 元素裡面只能放 inline 元素。

  • inline 元素(替換元素例外)的外邊距(margin)與內距(padding)不會推開其上下方的元素,但會推開左右兩邊的元素。這是因為 inline 元素 (替換元素例外)的上下外邊距 (margin-top、margin-bottom)與上下內距 (padding-top、padding-bottom)不會影響 line box 的高。

直接看下方範例應該比較好理解,<em> 為 inline 元素(紅字部分),將它設定 margin 或 padding,會發現它與左右兩邊文字隔開距離,但與上下文字的距離不變。codepen 範例連結

https://ithelp.ithome.com.tw/upload/images/20190917/20120740h43LMx5G7U.png


二、inline 元素有哪些

在預設情況下,inline 元素包括:

https://ithelp.ithome.com.tw/upload/images/20190917/20120740x74oFz5J0m.png


發現了嗎? 常見的 <img> 是 inline 元素。

咦? 可是剛在 inline 元素的特性中提到,inline 元素是無法透過 width 和 height 屬性來調整寬高的,但是 <img> 卻可以透過 width 和 height 屬性來調整寬高,這是怎麼一回事呢?

/images/emoticon/emoticon19.gif

其實這是因為img 是替換元素(Replaced element),至於到底什麼是替換元素,之後的文章會再進一步說明。



最後補充一個小常識,要如何在瀏覽器上檢視元素預設的 display 屬性值是什麼呢?

  • step1: 按 F12 或右鍵檢查
  • step2: 按一下左上方小箭頭
  • step3: 將滑鼠移到元素上並點選
  • step4: 點選 computed
  • 在搜尋欄輸入 display

以 <span> 為例,<span> 預設的 display 屬性值為 inline 元素。

https://ithelp.ithome.com.tw/upload/images/20190917/20120740tyANh9hwl2.png




上一篇
前端新手進化史 - 前傳
下一篇
大 角頭 block
系列文
前端新手進化史30

1 則留言

0
Chris
iT邦新手 5 級 ‧ 2019-09-17 23:38:58

果然是高手啊

yachen iT邦新手 5 級 ‧ 2019-09-20 04:55:43 檢舉

/images/emoticon/emoticon70.gif

我要留言

立即登入留言