margin top無效的解決方法

2022-05-05 23:33:12 字數 303 閱讀 7750

為什麼會出現margin-top無效?

原因:根據w3c盒子模型的規範,乙個盒子如果沒有上補白(padding-top)和上邊框(border-top),那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。

解決該問題的辦法:

1.在父元素加上有意義的border數值(0,none無效)

2.用內邊距來解決(給其父元素乙個設定個內邊距)

3.在父級元素加: float:left; (clear:both;)

4.在父級元素加:overflow:hidden;

第4種辦法最好。

CSS span元素margin top無效的根源

span預設是行屬性,而div預設是塊屬性。對行內元素 不包括可替換元素如img等 1.設定寬度width 無效。2.設定高度height無效,可以通過line height來設定高度。3.設定margin只有左右margin有效,上下無效。這就是span的margin top無效的原因 4.設定p...

子類設定margin top無效

做乙個效果 head head logo 上面的 大家估計都看的懂,需要顯示的效果圖如下 但實際如下 我擦,這是搞啥鬼,子類沒有效果,父類向下偏移了,這是啥原因呢?這是因為父元素和子元素的margin發生了和並,父元素的margin是0px,子元素的margin是10px,所以合併後的margin是...

關於內層標籤margin top無效的問題

最近在頁面布局的時候遇到了這麼乙個問題 charset utf 8 title type text css header header logo lg style head class logo href id logo lg 我是內層div div header body html 如下圖,設定了...