Qu'est-ce que l'effondrement des marges ? Dans quelles circonstances apparaît-il ? Comment le résoudre ?

Cet article vous amènera à comprendre le modèle de boîte CSS et à vous présenter ce qu'est l'effondrement des marges ? Dans quelles circonstances un effondrement des marges se produit-il ? Et parlons de solutions.

En CSS, tous les éléments sont entourés de « boîtes » une par une. Nous utilisons largement deux types de « boîtes » : les boîtes au niveau du bloc (block box ) et les boîtes en ligne (block box ). code>boîte en ligne). block box) 和 内联盒子 (inline box)。

什么是 CSS 盒模型？

在 CSS 中，盒模型（box model）是在设计和布局时使用。

盒模型的定义可以分成这几部分：

• Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
• Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
• Border box: 包裹内容和内边距。大小通过 border 相关属性设置。
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

块级盒子完整地应用了 CSS 盒模型，内联盒子只使用盒模型中定义的部分内容。

box-sizing

box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。

• content-box（默认值），即标准盒模型，width: 100px 指的是内容区会有 100px 宽。
  • 盒子的大小 = content(100px) + padding + border
• border-box，即替代（IE）盒模型，width: 100px 指的是 内容区 + 边框 + 内边距 的总和是 100px 宽。
  • 盒子的大小 = content + padding + border = 100px

不论那种模型，margin 都是不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。

display

这里可以补充一个概念 -- 内部和外部显示类型。

• 外部显示类型，我们通过对盒子 display 属性的设置，比如 inline 或者 block ，来控制盒子的是内联还是块级。
• 内部显示类型，它决定了盒子内部元素是如何布局的。

如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为 flex 元素，会根据 弹性盒子（Flexbox ）规则进行布局。

还有一个特殊的值 -- display: inline-block，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:不发生换行，但可以设定宽度和高度，也就是说实现了块级的部分效果：

• 设置 width 和 height 属性会生效。
• padding, margin, 以及 border 会推开其他元素。

行内元素 / 块级元素

HTML4 中，元素被分成两大类: inline (内联元素) 与 block (块级元素)。

1. 什么是行内元素？

一个行内元素只占据它对应标签的边框所包含的空间。

常见的行内元素有 a、 b、 span、 img、 strong、 sub sup、 button、 input、 label、 select、 textarea

2. 什么是块级元素？

块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。

常见的块级元素有 div、ul 、ol、 li、 dl、 dt、 dd、 h1、 h2、 h3、h4 、 h5、h6 、p

Qu'est-ce que le modèle de boîte CSS ?

En CSS, le modèle de boîte est utilisé dans la conception et la mise en page. 🎜🎜La définition du modèle de boîte peut être divisée en ces parties : 🎜

• Boîte de contenu : Cette zone est utilisée pour afficher le contenu. La taille peut être définie en définissant . width et height.
• Boîte de remplissage : une zone vide entourée à l'extérieur de la zone de contenu. La taille est définie via le  ; propriétés liées au remplissage.
• Boîte de bordure : enveloppe le contenu et le remplissage. La taille est définie via les propriétés liées à border.
• Boîte de marge : il s'agit de la zone la plus extérieure, l'espace vide entre la boîte et les autres éléments. La taille est définie via les propriétés liées à la marge.

🎜🎜🎜Les boîtes au niveau du bloc appliquent entièrement le modèle de boîte CSS, tandis que les boîtes en ligne n'utilisent qu'une partie du contenu défini dans le modèle de boîte. 🎜

box-sizing

🎜L'attribut box-sizing définit le navigateur Comment faut-il calculer la largeur totale et la hauteur totale d'un élément. 🎜

• content-box (valeur par défaut), qui est le modèle de boîte standard, width : 100px fait référence au contenu zone Il fait 100px de large.
  • Taille de la boîte = content(100px) + padding + border
• border-box, qui est le modèle de boîte alternatif (IE), width : 100px fait référence à la zone de contenu + border La somme de + padding fait 100px de large.
  • Taille de la boîte = content + padding + border = 100px

🎜Quel que soit le modèle, la marge n'est pas prise en compte dans la taille réelle - bien sûr, cela affectera l'espace occupé par la case sur la page , mais ce qui affecte, c'est l'espace extérieur de la boîte. 🎜

affichage

🎜Ici, vous pouvez ajouter un concept - interne et externe Type d'affichage. 🎜

• Type d'affichage externe, nous définissons l'attribut display de la boîte, tel que inline ou block pour contrôler si la boîte est en ligne ou au niveau du bloc.
• Type d'affichage interne, qui détermine la façon dont les éléments à l'intérieur de la boîte sont disposés.

🎜Si vous définissez display: flex, sur un élément, le type d'affichage externe est block, mais le type d'affichage interne Le type est changé en flex. Tous les éléments enfants directs de la boîte deviendront des éléments flex et seront disposés selon les règles de la boîte flexible (Flexbox). 🎜🎜Il existe également une valeur spéciale -- display: inline-block, qui fournit un état intermédiaire entre inline et block. Ceci est très utile dans les situations suivantes : aucun retour à la ligne ne se produit, mais la largeur et la hauteur peuvent être définies, ce qui signifie que certains effets au niveau du bloc sont obtenus : 🎜

• Définir la largeur et l'attribut height prendra effet.
• padding, margin et border repoussent les autres éléments.

Éléments en ligne/éléments au niveau du bloc

🎜En HTML4, les éléments sont divisés en deux catégories : inline (éléments en ligne) et block (éléments au niveau du bloc). 🎜

1. Que sont les éléments en ligne ?

🎜Un élément en ligne n'occupe que l'espace contenu par la bordure de son étiquette correspondante. 🎜🎜Les éléments en ligne courants incluent a, b, span, img, strong >, sub sup, bouton, entrée, étiquette, select , textarea🎜

2. Qu'est-ce qu'un élément de niveau bloc ?

🎜Un élément de niveau bloc occupe tout l'espace de son élément parent (conteneur), créant ainsi un "bloc". Habituellement, les navigateurs ajoutent une nouvelle ligne avant et après les éléments de niveau bloc. 🎜🎜Les éléments courants au niveau du bloc incluent div, ul, ol, li, dl code&gt;, <code>dt, dd, h1, h2, h3, h4 , h5, h6 , p🎜

3. La différence ?

• Format (par défaut), les éléments en ligne ne seront pas renvoyés à la ligne, mais les éléments au niveau du bloc le seront.

• Sur le contenu (par défaut), les éléments en ligne ne peuvent contenir que des données et d'autres éléments en ligne. Les éléments de niveau bloc peuvent contenir des éléments en ligne et d'autres éléments de niveau bloc.

• Sur les attributs :

  • Les éléments en ligne
    • Les paramètres largeur et hauteur ne sont pas valides (la hauteur de ligne peut être définie), width 和 height 设置无效（可以设置 line-height)，
    • 内边距（padding）、外边距（margin） 和 边框（border） 在 上下方向 不会对其他元素产生影响。
  • 块级元素
    • width 和 height 属性可以发挥作用，
    • 内边距（padding）、外边距（margin） 和 边框（border） 会将其他元素从当前元素周围“推开”

外边距（margin）折叠

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为 边距折叠。

什么情况才会出现

2 个或多个毗邻的的普通流中的块元素垂直方向上的 margin 会折叠

• 毗邻： 是指没有被非空内容、padding、border 或 clear 分隔开
• 垂直方向： 是指只有垂直方向的 margin 才会

如何解决？

• 创建了 BFC 的元素 和它的子元素/兄弟元素不会发生折叠

• 设置 padding / border ，一些具体的场景：

  • 父元素的 margin-top 和子元素的 margin-top 发生重叠。

    发生重叠是因为它们是相邻的，所以我们可以通过这一点来解决这个问题。我们可以为父元素设 border-top、padding-top 值来分隔它们。

  • 高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 发生重叠。

    发生重叠一个是因为它们相 邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置 border-bottom、 padding-bottom 来分隔它们，也可以为父元素设置一个高度，max-height 和 min-height 也能解决这个问题。

  • 是没有内容的元素，自身的 margin-top 和 margin-bottom 发生的重叠。

    我们可以通过为其设置 border、padding 或者高度来解决这个问题。

触发 BFC 的因素

• float（除了 none）
• overflow（除了 visible）
• display（table-cell / table-caption / inline-block）
• position
à l'intérieur de l'espacement (padding), des marges (margin) et des bordures (border) n'affecteront pas les autres éléments dans les directions

haut et bas

.

🎜🎜Éléments au niveau du bloc🎜🎜🎜Les attributs width et height peuvent jouer un rôle, 🎜🎜Padding (padding), extérieur margin Spacing (margin) et border (border) "pousseront" les autres éléments loin de l'élément actuel 🎜🎜🎜🎜🎜🎜🎜🎜

🎜Réduire la marge (margin)🎜

🎜La marge supérieure (margin-top) et la marge inférieure (margin-bottom) du bloc sont parfois fusionnées (réduit ) ) est une marge unique dont la taille est le maximum de la marge unique (ou d'une seule d'entre elles si elles sont égales), un comportement appelé 🎜effondrement de la marge🎜. 🎜

🎜Que se passe-t-il lorsque 🎜🎜🎜deux éléments de bloc adjacents ou plus dans le flux normal ont des marges verticales qui s'effondrent🎜🎜🎜🎜adjacent🎜 : Cela signifie qu'il n'est pas séparé par contenu non vide, padding, border ou clear 🎜🎜🎜Direction verticale🎜 : Cela signifie que seule la marge verticale sera 🎜🎜

🎜Comment le résoudre ? 🎜🎜🎜🎜🎜🎜L'élément qui a créé BFC🎜 et ses éléments enfants/éléments frères ne seront pas pliés🎜🎜🎜🎜Définir padding / border, quelques scénarios spécifiques : 🎜🎜🎜🎜La margin-top de l'élément parent chevauche la margin-top de l'élément enfant . 🎜🎜Le chevauchement se produit parce qu'ils sont adjacents, nous pouvons donc résoudre le problème en utilisant cela. Nous pouvons définir les valeurs border-top et padding-top pour l'élément parent afin de les séparer. 🎜🎜🎜🎜Le margin-bottom de l'élément parent avec une hauteur auto chevauche le margin-bottom de l'élément enfant. 🎜🎜Un chevauchement se produit parce qu'ils sont adjacents, et l'autre parce que la hauteur de l'élément parent n'est pas fixe. Par conséquent, nous pouvons définir border-bottom et padding-bottom pour que l'élément parent les sépare, ou nous pouvons définir une hauteur pour l'élément parent, max- height et min-height peuvent également résoudre ce problème. 🎜🎜🎜🎜 est un élément sans contenu, où ses propres margin-top et margin-bottom se chevauchent. 🎜🎜Nous pouvons résoudre ce problème en définissant border, padding ou sa hauteur. 🎜🎜🎜🎜🎜

🎜Facteurs qui déclenchent BFC🎜🎜🎜🎜float (sauf aucun)🎜🎜 overflow (sauf visible) 🎜🎜display (table-cell / table-caption / inline-block) 🎜🎜position (sauf statique / relatif) 🎜🎜 🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!