外边距合并_html/css_WEB-ITnose
前提
只有在普通文档流中垂直相邻外边距会合并。
行内框,浮动框或者绝对定位之间的外边距不会合并。
1.相邻元素有多个外边距
1 <ul>2 <li>line 1</li>3 <li>line 2</li>4 </ul>5 <h3 id="This-is-h-line">This is h3 line.</h3>
1 ul{margin-bottom:15px;}2 li{margin-top:10px;margin-bottom:20px;}3 h3{margin-top:28px;}
ul下边距为15px,li下边距为20px,h3上边距为28px,外边距合并会取最大值而非相加,由此line 2与h3间距为28px。
注:如果给ul加一个边框,li下边距将被放在ul内部,此时只会发生ul与h3之间的合并。
如果ul,h3外边距都为负值,则取绝对值最大的负外边距与最大的正外边距相加,得到间距。
2.块元素内部包含块元素(父元素没有设置内边距或者边框)
1 <div id="outer">2 <div id="inner"></div>3 </div>
1 #outer{ 2 width:200px; 3 height:100px; 4 background:rgb(245,138,158); 5 margin-top:20px; 6 } 7 #inner{ 8 width:50px; 9 height:50px;10 background:rgb(147,172,213);11 margin-top:10px;12 }
inner没有预想中的相对outer下沉10px,而是保持和outer位置相对不变,outer整体下沉10px。此时如果设置outer的上外边距为20px,两者相较取其大,整体outer下沉20px。
如果给父元素加边框(或内边距)隔开内部元素的外边距,则不会发生外边距合并:
1 #outer{border:1px solid rgb(147,172,213);}
注:块元素内包含行内元素的话不会发生外边距合并(见水平居中与垂直居中)。
3.空元素的上下外边距合并
1 <div class="blank"></div>2 <div class="focus"></div>3 <div class="blank"></div>
1 .blank{2 width:100px;3 height:50px;4 background:rgb(245,138,158);5 }6 .focus{margin:10px 0 20px 0;}
focus撑开的间距为20px(两者取其大),如果blank有外边距还会继续发生合并,多个空元素同理。
参考资料
css外边距合并
详解css外边距合并

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)

Sujets chauds

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

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.

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.

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

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

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

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

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
