天天看點

h3标簽在容器頂部無法設定上下外邊距的問題

在模仿淘寶網頁的時候,遇到h3标簽在容器頂部時設定外邊距與大容器的外邊距重合。情況如下

<div class="w bgwh">
	 <div class="belt">
	      <h3 class="belth fl"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="lh24"><img src="img/beltT.png"></a></h3>
	      <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class=""></a>
	 </div>
</div>
           

(1)在網上搜尋得出答案是把h3樣式中添加display:inline的樣式,然後悲劇了,發現無法設定行高。仔細觀察淘寶發現其有設定了float:left;此時h3外邊距能用了,并且寬度也能用了。

(2)不用設定行高,隻需要在h3的容器中的樣式中添加overflow: hidden; zoom:1;就可以設定寬度。并且belt的外邊距與大容器bgwh的外邊距不重合。

此問題屬于高度塌陷問題詳細的解決方法可以參考http://blog.csdn.net/qq_29104999/article/details/53504338他山之石可以功玉。