关于HTML中父子级外边距合并的问题

程序员文章站 2022-03-26 17:57:12

父子级外边距合并的解决方式解决方式:1解决方法2解决方法3解决方法4下面展示一些代码，看看出现的结果。 Document</t...</div> <div class="content"> <div class="toc"> <h3> 父子级外边距合并的解决方式 </h3> <ul><ul> <li> <a href="#1_41">解决方式:1</a> </li> <li> <a href="#2_50">解决方法2</a> </li> <li> <a href="#3_61">解决方法3</a> </li> <li> <a href="#4_68">解决方法4</a> </li> <li> <a href="#_84">方法总结</a> </li> </ul></ul> </div> 下面展示一些代码，看看出现的结果。 <pre><code class="prism language-javascript"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0 auto; } .outer{ width: 200px; height: 200px; background-color: red; } .outer>div{ width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <div class="outer"> <div></div> </div> </body> </html> </code></pre> 所得结果如下图<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA4MDgvYl8wXzIwMjAwODA4MTkyOTAyMjUwOS5wbmc=" alt="关于HTML中父子级外边距合并的问题" title="关于HTML中父子级外边距合并的问题"> 接下来使蓝色区域与红色区域的上边框产生一定的间距，添加如下代码，看看结果。 <pre><code class="prism language-javascript">.outer>div{ margin-top:100px; } </code></pre> 所得结果如下图，蓝色区域与红色区域的上边框并没有产生间距 <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA4MDgvYl8wXzIwMjAwODA4MTkyOTAzMTQ0OC5qcGc=" alt="关于HTML中父子级外边距合并的问题" title="关于HTML中父子级外边距合并的问题"> <h2> <a id="1_41" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>解决方式:1 </h2> <pre><code class="prism language-javascript">.outer{ border:1px solid red; } </code></pre> 蓝色区域与红色区域的上边框分离了 <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA4MDgvYl8wXzIwMjAwODA4MTkyOTAzMzY0Ni5qcGc=" alt="关于HTML中父子级外边距合并的问题" title="关于HTML中父子级外边距合并的问题"> <h2> <a id="2_50" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>解决方法2 </h2> <pre><code class="prism language-javascript">.outer>div{ margin-left:100px; /*可自行设置距离*/ float:left; } </code></pre> 所得结果如下图 <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA4MDgvYl8wXzIwMjAwODA4MTkyOTA0MTM1OS5qcGc=" alt="关于HTML中父子级外边距合并的问题" title="关于HTML中父子级外边距合并的问题"> <h2> <a id="3_61" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>解决方法3 </h2> <pre><code class="prism language-javascript">.outer{ overflow:hidden; } </code></pre> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA4MDgvYl8wXzIwMjAwODA4MTkyOTA0MjMwMS5qcGc=" alt="关于HTML中父子级外边距合并的问题" title="关于HTML中父子级外边距合并的问题"> <h2> <a id="4_68" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>解决方法4 </h2> 将本应该设置给子元素的外边距设置给父元素的内边距 <pre><code class="prism language-javascript">*{box-sizing:border-box;} /*将盒子类型设置为边框盒子*/ .outer{ padding-top:100px; } .outer>div{ /*margin-left:100px;*/ } </code></pre> 也能得到下图 <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA4MDgvYl8wXzIwMjAwODA4MTkyOTA1MzUyNy5qcGc=" alt="关于HTML中父子级外边距合并的问题" title="关于HTML中父子级外边距合并的问题"> 还有一些方法，等着你去探索！！！ <h2> <a id="_84" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>方法总结 </h2> 1.给父元素添加边框属性 2.给父元素/子元素添加浮动属性 3.给父级元素设置overflow:hidden属性 4.将本应该设置给子元素的外边距设置给父元素的内边距 本文地址：https://blog.csdn.net/song_dehao/article/details/107864307 </div> <div class="tags"> 相关标签： <a href="/t/html/" target="_blank"> html </a> <a href="/t/css/" target="_blank"> css </a> <a href="/t/html5/" target="_blank"> html5 </a> </div> <div class="info-pre-next"> 上一篇： <a href="/article/341094.html"> 小刘同学的第一百零一篇博文 </a> 下一篇： <a href="/article/341096.html"> 浅谈工程化\浅谈模块化\浅谈模块化\浅谈组件化\浅谈规范化 </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/1561045.html" target="_blank" title="关于css中margin的值和垂直外边距重叠问题"> <h2> 关于css中margin的值和垂直外边距重叠问题 </h2> </a> </li> <li> <a href="/article/1556371.html" target="_blank" title="关于HTML中父子级外边距合并的问题"> <h2> 关于HTML中父子级外边距合并的问题 </h2> </a> </li> <li> <a href="/article/341095.html" target="_blank" title="关于HTML中父子级外边距合并的问题"> <h2> 关于HTML中父子级外边距合并的问题 </h2> </a> </li> <li> <a href="/article/320622.html" target="_blank" title="请教关于CSS中padding内边距的问题_html/css_WEB-ITnose"> <h2> 请教关于CSS中padding内边距的问题_html/css_WEB-ITnose </h2> </a> </li> <li> <a href="/article/243527.html" target="_blank" title="请教关于CSS中padding内边距的问题_html/css_WEB-ITnose"> <h2> 请教关于CSS中padding内边距的问题_html/css_WEB-ITnose </h2> </a> </li> <li> <a href="/article/142573.html" target="_blank" title="关于css中margin的值和垂直外边距重叠问题"> <h2> 关于css中margin的值和垂直外边距重叠问题 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about">关于网站<ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </div></div></div></footer> </body> </html>