마진 붕괴란 무엇입니까? 어떤 상황에서 나타나나요? 어떻게 해결하나요?

이 기사에서는 CSS 상자 모델을 이해하고 여백 축소란 무엇인지 소개합니다. 어떤 상황에서 마진 붕괴가 발생합니까? 그리고 해결책에 대해 이야기해 보세요.

CSS에서는 모든 요소가 하나씩 "상자"로 둘러싸여 있습니다. 블록 수준 상자(블록 상자)와 인라인 상자(인라인 상자). 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

CSS 박스 모델이란 무엇인가요?

CSS에서는 디자인과 레이아웃 중에 상자 모델이 사용됩니다. 🎜🎜상자 모델의 정의는 다음과 같은 부분으로 나눌 수 있습니다. 🎜

• 콘텐츠 상자: 이 영역은 콘텐츠를 표시하는 데 사용됩니다. 크기는 를 설정하여 설정할 수 있습니다. 너비 및 높이.
• 패딩 상자: 콘텐츠 영역 외부로 둘러싸인 빈 영역은 를 통해 설정됩니다. 패딩 관련 속성.
• 테두리 상자: 콘텐츠와 패딩을 래핑합니다. 크기는 테두리 관련 속성을 통해 설정됩니다.
• 여백 상자: 가장 바깥쪽 영역으로 상자와 다른 요소 사이의 빈 공간입니다. 크기는 margin 관련 속성을 통해 설정됩니다.

🎜🎜🎜블록 수준 상자는 CSS 상자 모델을 완전히 적용하고 인라인 상자는 상자 모델에 정의된 콘텐츠의 일부만 사용합니다. 🎜

box-sizing

🎜box-sizing 속성은 브라우저를 정의합니다. 요소의 전체 너비와 전체 높이를 계산해야 합니다. 🎜

• content-box(기본값)는 표준 상자 모델이며, 너비: 100px는 콘텐츠를 나타냅니다. 영역 너비는 100px입니다.
  • 상자 크기 = 내용(100px) + 패딩 + 테두리
대체(IE) 상자 모델인
• border-box, 너비: 100px는 콘텐츠 영역 + border + padding의 합은 너비가 100px입니다.
  • 상자 크기 = 내용 + 패딩 + 테두리 = 100px
  / ul>

🎜어떤 모델이든 여백은 실제 크기에 포함되지 않습니다. - 물론 페이지에서 상자가 차지하는 공간에 영향을 미칩니다. , 그러나 영향을 미치는 것은 상자의 외부 공간입니다. 🎜

display

🎜여기서 내부 및 외부 개념을 추가할 수 있습니다. 디스플레이 유형. 🎜

• 외부 디스플레이 유형인 경우 inline 또는 display 속성을 ​​설정합니다. code >block은 상자가 인라인인지 블록 수준인지 제어합니다.
• 내부 표시 유형: 상자 내부의 요소가 배치되는 방식을 결정합니다.

🎜요소에 display: flex를 설정하면 외부 디스플레이 유형은 block이지만 내부 디스플레이 유형 유형이 flex로 변경됩니다. 상자의 모든 직접 하위 요소는 flex 요소가 되며 유연한 상자(Flexbox)의 규칙에 따라 배치됩니다. 🎜🎜인라인과 블록 사이의 중간 상태를 제공하는 특수 값인 display: inline-block도 있습니다. 이는 다음 상황에 매우 유용합니다. 줄 바꿈이 발생하지 않지만 너비와 높이를 설정할 수 있으므로 일부 블록 수준 효과가 달성됩니다. 🎜

• 너비 설정 및 높이 속성이 적용됩니다.
• padding, margin 및 border는 다른 요소를 밀어냅니다.

인라인 요소/블록 수준 요소

🎜HTML4에서 요소는 두 가지 범주로 나뉩니다. inline(인라인 요소) 및 block(블록 수준 요소). 🎜

1. 인라인 요소란 무엇인가요?

🎜인라인 요소는 해당 레이블의 테두리에 포함된 공간만 차지합니다. 🎜🎜일반적인 인라인 요소에는 a, b, span, img, strong이 포함됩니다. >, 하위 sup, 버튼, 입력, 라벨, 선택 , textarea🎜

2. 블록 수준 요소란 무엇인가요?

🎜블록 수준 요소는 상위 요소(컨테이너)의 전체 공간을 차지하므로 "블록"이 생성됩니다. 일반적으로 브라우저는 블록 수준 요소 앞뒤에 새 줄을 추가합니다. 🎜🎜일반적인 블록 수준 요소에는 div, ul, ol, li, dl이 포함됩니다. 코드>, <code>dt, dd, h1, h2, h3, >h4 , h5, h6 , p🎜

3. 차이점은?

• Format (기본적으로) 인라인 요소는 래핑되지 않지만 블록 수준 요소는 래핑됩니다.

• 콘텐츠에서 (기본적으로) 인라인 요소는 데이터 및 기타 인라인 요소만 포함할 수 있습니다. 블록 수준 요소에는 인라인 요소와 기타 블록 수준 요소가 포함될 수 있습니다.

• 속성:

  • 인라인 요소
    • width 및 height 설정이 잘못되었습니다(line-height 설정 가능). 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
내부 간격(padding), 여백(margin) 및 테두리(border)는

위쪽 및 아래쪽 방향

의 다른 요소에 영향을 주지 않습니다.

🎜🎜블록 수준 요소🎜🎜🎜width 및 height 속성은 🎜🎜Padding(padding), 외부 역할을 할 수 있습니다. 여백 간격(margin) 및 테두리(border)는 현재 요소에서 다른 요소를 "밀어냅니다" 🎜🎜🎜🎜🎜🎜🎜🎜

🎜Margin(margin)collapse🎜

🎜블록의 위쪽 여백(margin-top)과 아래쪽 여백(margin-bottom)이 병합되는 경우가 있습니다(collapsed) ) )는 크기가 단일 여백의 최대값(또는 동일한 경우 그 중 하나만)인 단일 여백이며, 🎜margin collapsing🎜이라는 동작입니다. 🎜

🎜일반 흐름에서 🎜🎜🎜두 개 이상의 인접한 블록 요소에 수직 여백이 붕괴되는 경우 어떻게 되나요?🎜🎜🎜🎜adjacent🎜: 이는 다음으로 분리되지 않음을 의미합니다. 비어 있지 않은 콘텐츠, 패딩, 테두리 또는 지우기 🎜🎜🎜세로 방향🎜: 세로 여백만 🎜🎜

🎜해결 방법은 무엇입니까? 🎜🎜🎜🎜🎜🎜BFC🎜를 생성한 요소와 해당 하위 요소/형제 요소는 접히지 않습니다.🎜🎜🎜🎜패딩 설정 / 테두리, 일부 특정 시나리오: 🎜🎜🎜🎜상위 요소의 margin-top이 하위 요소의 margin-top과 겹칩니다. . 🎜🎜인접하기 때문에 겹침이 발생하므로 이를 이용하면 문제를 해결할 수 있습니다. 상위 요소에 대해 border-top 및 padding-top 값을 설정하여 이를 구분할 수 있습니다. 🎜🎜🎜🎜높이가 auto인 상위 요소의 margin-bottom이 하위 요소의 margin-bottom과 겹칩니다. 🎜🎜하나는 인접해 있어서 겹치는 부분이 있고, 다른 하나는 상위 요소의 높이가 고정되어 있지 않아서 발생합니다. 따라서 상위 요소에 대해 border-bottom 및 padding-bottom을 설정하여 이를 구분하거나 상위 요소의 높이를 max- 높이 및 최소 높이도 이 문제를 해결할 수 있습니다. 🎜🎜🎜🎜은 콘텐츠가 없는 요소로, 자체 margin-top과 margin-bottom이 겹칩니다. 🎜🎜테두리, 패딩 또는 높이를 설정하여 이 문제를 해결할 수 있습니다. 🎜🎜🎜🎜🎜

🎜BFC🎜🎜🎜🎜float를 트리거하는 요소(없음 제외)🎜🎜 오버플로 (표시 제외) 🎜🎜display (table-cell / table-caption / inline-block) 🎜🎜position (정적/상대 제외) 🎜🎜 🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 마진 붕괴란 무엇입니까? 어떤 상황에서 나타나나요? 어떻게 해결하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!