CSS에서 겹치지 않는 여백에 대한 이미지 및 텍스트 코드에 대한 자세한 설명

Marginoverlap

CSS2.1 사양의 중국어 버전에서 발췌

CSS에서는 두 개 이상의 상자(아마도 형제일 수도 있지만 반드시 그런 것은 아님)의 인접한 여백이 하나의 여백으로 결합됩니다. 이런 방식으로 마진을 결합하는 것을 붕괴
라고 하며, 결과적으로 결합된 마진을 겹치는 마진이라고 합니다.

여백 겹침 계산 규칙

중국어 버전 CSS2.1 사양에서 발췌

둘 이상의 여백이 병합되면 결과 여백 너비는 결합된 여백 너비의 최대값이 됩니다. 음수 마진은 양수 인접 마진의 최대값에서 음수 인접 마진의 최대 절대값을 뺍니다. 양수 여백이 없는 경우 0에서 인접 여백의 최대 절대값을 뺍니다.

인접 여백이란 무엇입니까

CSS2.1 사양의 중국어 버전에서 발췌
두 여백이 인접한 경우는 다음과 같습니다.

• 모두 인스트림 블록 수준 상자에 속하며 동일한 블록 형식화 컨텍스트에 있습니다.

• 선 상자 없음, 간격 없음, 패딩 없음 및 구분할 테두리 없음(따라서 일부 높이 선 상자는 0임)

• 은 모두 수직으로 인접한 상자 가장자리(수직으로 인접한 상자 가장자리)입니다. 다음 쌍 중 하나에서:
  1. 상자의 상단 여백과 첫 번째 유입 하위 항목의 상단 여백
  2. 상자의 하단 여백과 다음 흐름의 다음 형제(다음 유입) 다음 형제)의 위쪽 여백
  3. 계산된 부모 높이 값이 'auto'인 경우 마지막 유입 자식의 아래쪽 여백과 해당 부모의 아래쪽 여백
  4. 상자가 새 블록 형식화 컨텍스트를 설정하지 않고 계산된 최소 높이 값이 0이고 계산된 높이 값이 0 또는 'auto'이며 유입 하위 항목이 없습니다

여백이 있는 경우 If 여백의 일부가 다른 여백에 인접해 있는 경우 접힌 여백인 해당 여백에 인접한 것으로 간주됩니다.

각 조건에 대한 자세한 분석

1. 모두 인스트림 블록 수준 상자에 속하며 동일한 블록 형식 컨텍스트에 있습니다.

인스트림 요소란 무엇인가요? 요소가 부동, 절대 위치 또는 루트 요소인 경우 흐름 외부 요소입니다. 요소가 흐름 외부에 없으면 흐름 내 요소라고 합니다.
인스트림 블록 수준 상자는 인스트림 블록 수준 요소에 의해 생성된 상자입니다.

결론 1: 루트 요소의 상자 여백은 겹치지 않습니다(이유: 루트 요소는 블록 수준 상자이지만 유입 요소는 아닙니다).

예를 들어주세요

위 내용은 CSS에서 겹치지 않는 여백에 대한 이미지 및 텍스트 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!