Flexbox는 마진 축소를 제거합니까?

Flexbox의 여백 축소

CSS에서 상위 요소와 마지막 하위 요소 모두 여백이 있는 경우 해당 여백은 단일 여백으로 축소됩니다. 그러나 Flexbox를 사용하면 이 동작이 변경됩니다.

Flexbox에서는 여백이 축소되지 않습니다. 이는 Flex 항목의 상위 요소(예: Flex 컨테이너)의 여백이 Flex 항목 자체의 여백과 결합되지 않음을 의미합니다. 이로 인해 Flexbox 레이아웃의 요소 사이에 의도하지 않은 공백이 발생할 수 있습니다.

예를 들어 다음 CSS를 고려해 보세요.

article {
  margin-bottom: 20px;
}

main {
  background: pink;
  margin-bottom: 20px;
}

footer {
  background: skyblue;
}

이 예에서는 기본 요소 내에 기사 요소가 중첩되어 있습니다. , 이는 바닥글 요소 내부에 중첩됩니다. Flexbox가 없으면 기사의 여백과 기본 여백이 기사와 바닥글 사이에 20px의 단일 여백으로 축소됩니다. 그러나 Flexbox를 사용하면 기사와 바닥글 사이에 40픽셀의 여백이 생깁니다. 즉, 기사에서 기본까지 20px, 기본에서 바닥글까지 20px의 여백이 생깁니다.

이러한 동작을 방지하려면 컨테이너 요소의 Flexbox 레이아웃. 예:

#container {
  display: block;
}

컨테이너 요소의 표시 속성을 차단으로 설정하여 가변상자 서식 지정 컨텍스트를 제거하고 기본 여백 축소 동작을 복원합니다.

위 내용은 Flexbox는 마진 축소를 제거합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!