CSS基礎 關於行內元素的內外邊距問題

2021-10-08 09:19:06 字數 793 閱讀 3935

對於行內元素的內外邊距問題有時候分的不是很清晰,特此做了乙個小實驗加深印象:

首先整體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.行內元素裡只能放文字或者其他...