Logo

菜单

发布于 2026-01-06 2 阅读
0

Entendiendo el Colapso de Márgenes（边距折叠）😓

Entendiendo el Colapso de Márgenes（边距折叠）😓

¡Hola gente bonita!👋

在此情况下，Margen 元素和 vecino 元素融合 (o colapsarán) 处于统一空间。洛斯·玛吉内斯的可折叠物品可能会产生性骚扰。该入门指南将帮助您实现完美的可折叠功能。

前面的功能是在 Margen 和 nuestro modelo de caja (box-model) 之间发生崩溃。

📦 盒子型号 - Margin

El margen es un espacio vacío que podemos usar para crear espacio entre una caja y otra en nuestro diseño.

盒式模型

如果您想了解详细的卡哈模型，请编写完整的文章。

📄 用户代理样式表

由于 CSS 的缺陷，我们可能会遇到一些问题，比如 llamamos 用户代理样式表（hojas de estilo del agente de usuario）。这就是我的意思，因为 CSS 是我们的一部分，这<h1>是一个伟大的事情<h2>，并且是一个很大的<body>问题。

替代文字

这很重要，但它会导致市长们遇到问题。由于缺陷 0 的儿子没有在 HTML 元素中工作，所以这将导致在短期内探索其他问题。

Las listas, los parrafos y los encabezados tienen márgenes (entre otros elementos)。如果一个人没有任何不便，那么他可能会因为一些原则上的问题而背叛自己的家人和家人。

如果缺陷，则 los márgenes izquierdo 和 derecho de un elemento de texto se establecen en 0，pero la mayoria de los elementos vienen con un margen upper (margin-top) 和 un margen lower (margin-bottom)。

这意味着我们页面上的元素的额外空间存在，并且没有任何问题可以明确地说明。

↕️ ¿Qué es un margen colapsado？

好吧，在垂直方向上，HTML 块的元素是很重要的，它是一种融合的方式，是一种伟大的统治。

W3C 文档定义了 siguiente manera 的崩溃：

“在CSS中，los márgenes adyacentes de dos o más bloques (que podrían o no ser hermanos) pueden Combinarse para formar un único margen。Cando los márgenes se Combinan de esta manera decimos que colapsan, y el margen Combinado resultante se denomina margen colapsado。”

无论如何，“未来的日子”是这样的，在未来，我们将与您的未来结合起来。但是，这对即将崩溃的所有事情有何意义？ ¡ La respuesta es no！ sólo es para márgenes Verticales（上、下）。

基本情况下发生的边缘崩溃：

☝️ Hermanos adyacentes。
✌️ Un contenedor padre y su prime elemento hijo。
👌 Un contenedor padre y su último elemento hijo。
✊ 空空如也。

⊟ Caso 1 (Hermanos adyacentes)

最佳视觉效果如下：

<div class="box-1">Esta caja tiene<span>margin-bottom:40px;</span>
</div>

<div class="box-2">Esta caja tiene <span>margin-top:40px;</span></div>
Enter fullscreen mode Exit fullscreen mode 
.box-1 {
    margin-bottom: 40px; ⬅
    padding: 20px;
    border: solid 5px red;
}
.box-2 {
    margin-top: 40px; ⬅
    padding: 20px;
    border: solid 5px blue;
}

span {
    font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

您可以将其设置为 80 像素（40 像素 + 40 像素），但实际尺寸为 40 像素。 Los dos márgenes se tocan entre sí, por lo que se comminan o se colapsan el uno con el otro.

下级元素崩溃了，下级元素崩溃了。

替代文字

Ahora para empujar aún más, vamos a dar a nuestra primera caja un margen lower (margin-bottom) de 100px:

.box-1 {
    margin-bottom: 100px;
}
.box-2 {
    margin-top: 40px;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

Como Podemos 观察在 Margen 的图像上，这是一个 100px 的 100px 和 Otra Caja 40px 的 Termina ganando es que tenga un valor Superior，Podemos decir que hay 100px de Margen 的 100px 和第二个卡哈。

Recuerda que en estos ejemplos los márgenes no se suman。

马尔涅斯的崩溃会影响整体元素display: block，但不会影响其他属性显示，例如display: flex。

➕➖ 正面和负面的崩溃

就描述而言，从正面来看，未来的结果是市长的结果。相反，如果是负面的，则结果就是负面的（el más negativo）。 Si un margen es positivo y el otro es negativo, el margen resultante es la diverencia entre el positivo el negativo:

  • Dos márgenes positivos：margen resultante igual al margen 市长。例如，如果尺寸为 50 像素和 25 像素，则结果尺寸为 50 像素。

  • 一切都是负面的，而负面的事情却越来越严重，而负面的事情却越来越严重。例如，如果是 -50px 和 -25px，则结果为 -50px。将此应用程序与其他元素一起使用。

  • Un margen positivo y otro negativo: el margen resultante es la diferencia entre ambos.例如，如果尺寸为 50 像素和 -25 像素，则结果为 25 像素 (50 – 25)。 El tamaño del margen colapsado es la suma del margen positivo más grande el margen negativo más pequeño (el más negativo)。

👨‍👦 Caso 2 - Un contenedor padre y su prime elemento.

在其他人的元素中，上级元素的底漆元素下降到上级元素的上级元素。 Las reglas son las Mismas que antes。例如，从积极的角度来看，这一切都是上级的，上级的结果是市长的勇气。

示例 1

Estamos colocando nuestro primo elemento <div>dentro de su contenedor padre。

El Margen hijo está siendo “absorbido” por el margen padre。 Los dos se Combinan y están sujetos a las Mismas reglas de colapso de márgenes que hemos visto hasta ahora (por ejemplo, el más grande gana)。

 <div class="parent">
    <div class="child"></div>
 </div>
Enter fullscreen mode Exit fullscreen mode 
body {
    margin: 0;
    font-family: arial;
}

.parent {
    margin-top: 50px;
    height: 250px;
    background: grey;
}

.child {
    margin-top: 40px;
    width: 200px;
    height: 200px;
    background: blue;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

Como puedes observar en la imagen los márgenes seguirán colapsados
¿Cómo puede ser esto？结果是，我们的想法模棱两可，但它的功能并不明确。

El margen Sirve para aumentar la distancia entre hermanos。没有 está pensado para aumentar la distancia entre un hijo 和 el cuadro delimitador de su padre； para eso está el padding。

如果您想与父亲的元素联系起来，您可以直接与父亲的马根联系。

例外：前面提到过，垂直方向上发生的崩溃发生在连续的和“tocan”上。 El colapso entre un contenedor y su prime elemento no ocurre si hay algo que separe los dos márgenes；例如，在元素内容中呈现内容为内嵌元素的内联前注，在文本中使用算法、边框或填充。

Puedes pensar en el padding/border como una especie de muro；如果是在马尔赫内斯中间，最好不要塌陷，因为在穆罗和卡米诺的路上干草，包括 1 像素的填充物干扰马尔赫内斯塌陷。

示例 2

这就是我所经历的header一切<h1>。

<header class="header">
   <h1 class="title">Lupita code</h1>
</header>
Enter fullscreen mode Exit fullscreen mode 
body {
    margin: 0;
    font-family: arial;
    background-color: #ccc;
}

.header {
    height: 50px;
    background-color: steelblue;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

Como podemos observar en la imagen hay un espacio entre la pare del viewport y el header, ese espacio extra no countere al bodyya que si te fijas en el código CSS, el bodytiene un margen con valor de 0. ¿Adivinas de dónde viene?

在此之前，header我们已完成了与该附件相关的所有通信<h1>，并且已修改了该附件的说明，并与该附件的垂直方向进行了修改。

¿Recuerdas cuando mencioné sobre las hojas de estilo del navegador？

替代文字

La solución es colocar un margin: 0al <h1>y así ya no se tiene esa separación. El resultado es el siguiente:

.title {
    margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

margin-top10px 的新尺寸<h1>

.title {
    margin: 0;
    margin-top: 20px;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

Como puedes 观察 el headerse 电影，并且可以单独观看电影<h1>。 Para que esto no ocurra, tenemos varias soluciones:

  1. Añadir la declaración overflow: hiddenal header.
  2. 添加padding-top一个header。
  3. Añadir un border-topal header.

Si añadimos padding, border o espacio a los elementos de los ejemplos anteriores, no se aplicará el colapso.在其他巴拉布拉斯，一种形式的 deshacerse del comportamiento del colapso de márgenes 包括 añadir algún Tipo de separación (borde, padding o espacio libre) entre los márgenes。

Caso 3 - Un contenedor padre y su último elemento.

类似地，前面发生的情况是上级、下级的冲突，并且是一个单独的要素。在前面的情况下，马吉尼斯的崩溃不会产生 si el borde 或 el padding del contenedor es Mayor a cero。

<div class="parent">
   <div class="child">Here is a paragraph</div>
</div>
<div class="div">Outside the parent</div>
Enter fullscreen mode Exit fullscreen mode 
body {
    margin: 0;
    font-family: arial;
}

.parent {
    margin-bottom: 30px;
    background: #49b293;
    height: auto;
}
.child {
    margin-bottom: 50px;
    background: blue;
    height: 100px;
    width: 200px;
}

.div {
    background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

案例 4 - 空块

Los márgenes Verticales de un bloque vacío (sin height ni padding ni contenido) también colapsan entre sí.例如，如果顶部为 40 像素，底部为 20 像素，则在垂直方向上的 40 像素区域中的元素占用空间如下：

<div class="box">Lorem, ipsum.</div>
<div class="empty"></div>
<div class="box">Lorem, ipsum.</div>
Enter fullscreen mode Exit fullscreen mode 
body {
    margin: 0;
    font-family: arial;
}

.box {
    margin: 0;
    height: 40px;
    padding: 10px;
    border: 2px solid;
    background: khaki;
}
.empty {
    margin-top: 40px;
    margin-bottom: 20px;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

例外

就所有事情而言，干草都例外，因为它们可能会在没有任何损坏的情况下发生。

  1. Flexbox、网格和其他元素都不是单一的。

边缘崩溃不适用于弹性项目、网格项目、绝对位置元素以及其他元素，但不包括区块的元素。

📋 结论

☑️ 发生的事故与垂直方向的碰撞发生了组合。一切顺利，洛斯多斯马尔吉内斯市长将陷入崩溃。
☑️ 没有水平方向的应用。
☑️ 单独出现的元素与 decir 中的元素相同，display: block- esto 不包括元素内联块。
☑️ Hay 4 casos en los que se Genera un colapso de márgenes。
☑️ CSS 的特殊规格是巨大的。没有意图 saberlo todo。 Aprende los Conceptos de alto nivel 和 las reglas comunes，busca cosas cuando las necesites y tómatelo con calma。

🔎资源：

感谢您🦸🏻‍♀️
社交方面的注意事项：

▶️YouTube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵TikTok

文章来源：https://dev.to/lupitacode/entendiendo-el-colapso-de-margenes-margin-collapsing-4oj6
两个加法问题 - 4 种以上的解法。
你这周赢了什么？