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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
