margin外边距合并详解_html/css_WEB-ITnose
margin外边距合并详解:
外边距合并现象在网页布局中非常的常见，必须对此有明确的把我，以此做到未雨绸缪，否则可能影响工作效率，甚至严重阻碍项目的进度。在网络上已经有大量的相关文章，下面再通过实例结合对网络教材的总结，再来介绍一下外边距合并现象。
概念:
相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的外边距合并。
水平方向不存在此现象。
外边距合并产生条件:
1.相邻的外边距之间没有非空内容、padding和border和clear分隔。
2.对象都处于文档流中，即非浮动和position属性值不为absolute和fixed的元素。
合并可以存在于兄弟对象之间，也可以存在于父子对象之间，下面就分开介绍一下:
一.兄弟对象之间的外边距合并:
实例如下:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:20px; } .bottom{ background-color:red; margin-top:10px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>以上代码的表现可以看出bottom元素的上边距和top元素的下边距产生合并现象，也就是两个元素垂直间距是20px，而不是20px+10px=30px。可以看出两个外边距的值取较大者。再来看一段代码实例:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:-20px; } .bottom{ background-color:red; margin-top:10px; position:relative; left:20px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>如果外边距有正有负，那么就选取最大值正直和最小的负值相加，得出的即是两个两个边距合并的值。再看一段实例代码:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:100px; height:100px; } .top{ background-color:green; margin-bottom:-20px; } .bottom{ background-color:red; margin-top:-10px; position:relative; left:20px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>如果对象的外边距都是负数，那么取最小的负数作为外边距。
二.父子外边距合并:
先看一段代码实例:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> #parent{ width:200px; height:200px; background-color:red; } #children{ width:60px; height:60px; background-color:green; margin:0px auto; margin-top:50px; } </style> </head> <body> <div id="parent"> <div id="children"></div> </div> </body> </html>在以上代码中，出现了外边距和并现象，这时，子元素的外边距并不作用于父元素，而是作用于父元素之外的对象。父子外边距合并不但要满足在文章开始介绍的两条外边距合并条，而且还要满足父元素中不能够有上下文布局属性，例如不能具有overflow（除visible）或者display:inline-block等属性。
特别说明:
以上介绍的外边距合并实例都是只涉及到两个对象，因为这在实际应用中是最常见的情况，但是外边距合并现象并非只局限于两个对象之间，只要满足外边距合并的条件就可以出现外边距合并现象，代码实例如下:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>外边距合并-蚂蚁部落</title> <style type="text/css"></style> </head> <body> <div style="border:1px solid red;width:200px;"> <div style="margin-top:50px; background-color:green;"> <div style="margin-top:-50px;"> <div style="margin-top:150px;">蚂蚁部落</div> </div> </div> </div> </body> </html>
在以上代码中，三个外边距出现合并现象。需要特别注意的是，计算合并后外边距值的方式并非是一层一层计算的，而是遵循在上面介绍的几个原则，那么上面的合并方式就是从负值值挑选最小的和从正值挑选的最大的相加，也就是-50px+150px=100px。
还有一种比较极端的合并方式:元素本身的外边距也会合并，代码实例如下:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"></style> </head> <body> <div style="border:1px solid red;width:200px;"> <div style="margin-bottom:50px;margin-top:50px;"></div> </div> </body> </html>
由以上代码的运行结果可以看出，自身的外边距产生了合并现象，但是此div不能够具有高度和内容等等，因为这样上下外边距就不相邻了，外边距合并的条件就不具备了。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/510.html
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
Mar 04, 2025 pm 12:32 PM
Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,
Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?
Mar 17, 2025 pm 12:27 PM
Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.
Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?
Mar 17, 2025 pm 12:20 PM
Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.
Bagaimana cara menambah kesan strok kepada imej PNG di laman web?
Mar 04, 2025 pm 02:39 PM
Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?
Mar 12, 2025 pm 04:05 PM
Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
