margin 的不正交
margin實用時會產生合并的現象
以下屬性會阻斷 margin 合并
border
display: table
display: flex
以上內容為結果 詳解在下方
阻斷合并【詳解】
/* CSS */ .box{ border:1px solid red; height: 100px; margin: 10px; /* 注意：這里是10像素哦！ */ }<!-- HTML --><div class="box"></div><div class="box"></div><div class="box"></div>
瀏覽器中是這個樣的：
按理數 margin 應該是 div 上下之間的間距應該為 20px
解決辦法 1、
<!-- HTML --><!-- css不變 --><div class="box"></div><div style="border: 1px solid blue"></div> <!-- 新加 --><div class="box"></div><div style="border: 0.1px solid blue"></div> <!-- 新加 --><div class="box"></div><div class="box"></div>
瀏覽器中是這個樣的：
<!-- HTML --><!-- css不變 --><!-- HTML --><div class="box"></div><div style="display: table"></div><div class="box"></div><div style="display: flex"></div><div class="box"></div><div class="box"></div><!-- display:block / inline 不會阻斷合并 只有table flex 可以 -->
瀏覽器中是這個樣的：
其他影響
display 會影響 ul li 的小圓點
position：absolute 會影響 display：inline
position：fixed 會影響 transform
float 會影響 inline
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
