為什么行內元素不能設置margin-top/margin-bottom/padding-top/padding-bottom?


HTML 里的元素分為替換元素(replaced element)和非替換元素(non-replaced element)。
- 替換元素是指用作為其他內容占位符的一個元素。最典型的就是img,它只是指向一個圖像文件。以及大多數表單元素也是替換,例如input等。
- 非替換元素是指內容包含在文檔中的元素。例如,如果一個段落的文本內容都放在該元素本身之內,則這個段落就是一個非替換元素。

討論margin-topmargin-bottom對行內元素是否起作用,則要對行內替換元素和行內非替換元素分別討論。

首先我們應該明確外邊距可以應用到行內元素,規范中是允許的,不過由於在向一個行內非替換元素應用外邊距,對行高(line-height)沒有任何影響。由於外邊距實際上是透明的。所以對聲明margin-topmargin-bottom沒有任何視覺效果。其原因就在於行內非替換元素的外邊距不會改變一個元素的行高。而對於行內非替換元素的左右邊距則不是這樣,是有影響的。

而為替換元素設置的外邊距會影響行高,可能會使行高增加或減少,這取決於上下外邊距的值。行內替換元素的左右邊距與非替換元素的左右邊距的作用一樣。

對於行內元素,設置左右內邊距,左右內邊距將是可見的。而設置上下內邊距,設置背景顏色后可以看見內邊距區域有增加,對於行內非替換元素,不會影響其行高,不會撐開父元素。而對於替換元素,則撐開了父元素


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM