CSS span元素margin top無效的根源

2021-07-23 05:46:48 字數 316 閱讀 3726

span預設是行屬性,而div預設是塊屬性。

對行內元素(不包括可替換元素如img等):

1. 設定寬度width 無效。

2. 設定高度height無效,可以通過line-height來設定高度。

3. 設定margin只有左右margin有效,上下無效。(這就是span的margin-top無效的原因)

4. 設定padding只有左右padding有效,上下則無效。

塊級元素的width/height/margin/padding都是有效的

解決辦法:把span強制設為塊屬性就可以了。

相鄰元素之間的margin問題

任何元素都可以設定border 設定寬高可能無效 行內元素設定padding,margin上下是無效的,左右是有效的 外邊距合併 指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。外邊距合併 疊加 是乙個相當簡單的概念。但是,在實踐中...

行內元素和margin疊加問題

行內元素正常狀態 行內元素設定寬高沒效,width 100px height 1000px 行內元素設定margin top,margin bottom無效,margin left,margin right有效 行內元素設定line height 100px 有效 行內元素變成塊狀,display ...

搞定CSS SPAN和DIV的區別

span 和 div 的區別在於,div division 是乙個塊級元素,可以包含段落 標題 乃至諸如章節 摘要和備註等。而span 是行內元素,span 的前後是不會換行的,它沒有結構的意義,純粹是應用樣式,當其他行內元素都不合適時,可以使用span。下面以乙個例項來說明這兩個屬性的區別。spa...