Table des matières
This is h3 line.
Maison interface Web tutoriel HTML 外边距合并_html/css_WEB-ITnose

外边距合并_html/css_WEB-ITnose

Jun 24, 2016 am 11:50 AM

前提 

  只有在普通文档流中垂直相邻外边距会合并。

  行内框,浮动框或者绝对定位之间的外边距不会合并。

 

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>
Copier après la connexion

1 ul{margin-bottom:15px;}2 li{margin-top:10px;margin-bottom:20px;}3 h3{margin-top:28px;}
Copier après la connexion

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>
Copier après la connexion

 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 }
Copier après la connexion

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>
Copier après la connexion

1 .blank{2    width:100px;3    height:50px;4    background:rgb(245,138,158);5 }6 .focus{margin:10px 0 20px 0;}
Copier après la connexion

focus撑开的间距为20px(两者取其大),如果blank有外边距还会继续发生合并,多个空元素同理。

 

参考资料

css外边距合并

详解css外边距合并

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quel est le but du & lt; Progress & gt; élément? 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? 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

Quel est le but du & lt; mètre & gt; élément? 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

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? 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? 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.

HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

See all articles