對於行內元素的內外邊距問題有時候分的不是很清晰,特此做了乙個小實驗加深印象:
首先整體html結構為:
"container"
>
span1
span2
段落2
層疊樣式表為:
1、對行內元素設定padding=10px;
span
效果如下圖,left、right和bottom均體現了效果但沒有撐開p標籤,且padding-top沒有如預期般撐開span:
如果給外層容器新增乙個外邊距,則發現span的padding-top體現了效果:
2、對行內元素設定margin=10px;
span
結果為左右有效果,上下無效果並且沒有撐開p標籤:
內外邊距對行內元素塊級元素的影響
1 內邊距對父級元素的影響 當塊級元素裡面還是塊級元素且沒有定義寬高時,子塊級元素的內邊距會將父塊級元素撐開 但是當子元素為行內元素的時候,內邊距對父級元素是無影響的。如下例 div和span的內邊距對父級div的影響 這是一段測試文字 這是一段測試文字 當腹肌元素限定了寬高時,子元素的內外邊距對父...
CSS中的內外邊距
css中的內邊框 css中邊框與內容之間的間距叫作css的內邊距。css的內邊距可以通過padding進行修飾。padding簡寫屬性在乙個宣告中設定所有內邊距屬性 auto length 通過使用下面單獨的四個屬性可以分別設定上,下,左,右內邊距。padding top padding butto...
css基礎 行內 快級元素
塊級元素 1.獨佔一行 2.可以設定margin padding 3.預設寬度width是父級元素的百分之百 4.快級元素裡可以放快級元素和行內元素 文字類的標籤內不能使用快元素 1.一行可以顯示多個 2.width height設定無效 3,width預設內容寬度 4.行內元素裡只能放文字或者其他...