CSS 여백 축소(CSS margin collapse)

때때로 두 개의 여백이 하나의 여백으로 축소된다.

CSS margin collapse

요소의 위쪽 및 아래쪽 여백은 때때로 두 여백 중 가장 큰 것과 같은 단일 여백으로 축소된다.

왼쪽과 오른쪽 여백에는 이러한 현상이 발생하지 않는다! 위쪽 및 아래쪽 여백만!

다음 예를 참조하시오:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>

<p>이 예제에서 h1 요소의 바닥 여백은 50px이고 h2 요소의 위쪽 여백은 20px입니다. 따라서 h1과 h2 사이의 수직 여백은 70px(50px + 20px)여야 합니다. 그러나 마진 붕괴로 인해 실제 마진은 50px가 됩니다.</p>

<h1>제목1</h1>
<h2>제목2</h2>

</body>
</html>

위의 예에서 <h1> 요소의 하단 여백은 50px이고 <h2> 요소의 상단 여백은 20px로 설정된다.

상식적으로 <h1>과 <h2> 사이의 수직 마진은 총 70px(50px + 20px)가 될 것으로 보인다.

하지만 마진 축소로 인해 실제 마진은 50px가 된다.

CSS margin 속성에 대해 아래 표와 같이 정리하였다.

속성	설명
margin	하나의 선언에 모든 여백 속성을 설정하기 위한 단축 속성
margin-bottom	요소의 아래쪽 여백을 설정합니다
margin-left	요소의 왼쪽 여백을 설정합니다
margin-right	요소의 오른쪽 여백을 설정합니다
margin-top	요소의 위쪽 여백을 설정합니다

지금까지 margin 속성에 관하여 실습하고 정의를 살펴보았다.

꼭 실습하기를 바라며 모두 화이팅입니다.!!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS height, width, max-width 속성 (0)	2023.07.21
CSS 패딩(CSS padding) (0)	2023.07.20
CSS 여백(margin) (0)	2023.07.18
CSS 둥근 테두리 (0)	2023.07.17
CSS 단축 테두리 속성 (0)	2023.07.16