[CSS] 당신은 여백을 모른다

소개

웹 사이트를 개발할 때 겪는 몇 가지 문제는 레이아웃, 가독성, 간격입니다. 이러한 경우 한 가지 솔루션은 마진을 현명하게 사용하는 것일 수 있습니다. 하지만 속성 margin 이 어떻게 작동하는지 정말 알고 계십니까?

이 글은 다음과 같이 구성되어 있습니다.

소개

정의

왜?

언제?

그렇지 않을 때는?

결론

정의

DuckDuckGoing Margin Collapse에 대한 몇 가지 정의를 찾았습니다. 여기에서 그 정의를 요약합니다.

W3.org에 따르면 마진 축소는 다음과 같습니다.

"The adjoining margins of two or more boxes can combine to form a single margin.[...] the resulting is called collapsing margin."

보다 포괄적인 정의는 CSS-Tricks에서 제공합니다.

"Collapsing margins happens when two vertical margins come in contact with one another."

내가 가져온 최종 정의는 MDN에서 제공합니다.

"The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins."

이러한 정의는 마진 축소가 무엇인지 설명하는 데 효과적이지만, 다음은 이러한 축소가 발생하는 몇 가지 사례를 보여줍니다.

왜요?

예제로 이동하기 전에 왜 이런 일이 발생하는지 설명해야 합니다.

CSS가 margin collapse를 사용하는 이유 중 하나는 this article에서 찾았습니다.

The concept of margin collapsing comes from graphic design. There, you have margins to title and subtitles, but when a subtitle comes just after the title you should not double the margins. This is why they developed the concept of collapsed margins and this is why it happens just on vertical margins.

여백 축소의 힘을 사용하여 쉽게 정의할 수 있습니다.
수직 콘텐츠 세트에 대한 여백.

이 속성이 있는 3개의 단락 세트가 있다고 상상해 보십시오.

p {
 margin-top: 10px;
}

<main>
//10px margin
  <p> My First Paragraph </p>
//10px margin
  <p> My Second Paragraph </p>
//10px margin
  <p> My Third Paragraph </p>
//0 margin
</main>

간격이 동일하지 않습니다. 이에 대한 쉬운 해결책은 여백 축소에 있습니다.

p {
 margin-top: 10px;
 margin-bottom: 10px;
}

<main>
//10px margin
  <p> My First Paragraph </p>
//10px margin (collapsed)
  <p> My Second Paragraph </p>
//10px margin (collapsed)
  <p> My Third Paragraph </p>
//10px margin
</main>

언제?

이 페이지를 떠날 때 기억해야 할 한 가지가 있다면 축소는 세로 여백에서만 발생한다는 것입니다.

주요 시나리오는 다음과 같습니다.

부모와 자손

테두리, 패딩, 인라인 부분 또는 클리어런스가 부모의 마진 상단을 첫 번째 자식과 구분하지 않으면 붕괴될 것입니다.



부모의 마지막 자식도 마찬가지입니다.

인접한 형제자매

인접한 형제가 있는 경우 상단 요소의 margin-bottom은 하단 요소의 margin-top과 함께 축소됩니다. 결과 크기는 둘 중 가장 큽니다.

빈 블록

빈 블록의 margin-top 및 margin-bottom은 패딩, 테두리, 인라인 콘텐츠가 없으면 축소됩니다. 또한 블록에 height 또는 min-height 속성이 없으면 축소되지 않습니다.

마이너스 여백

음수 마진의 경우 결과 크기는 관련된 신호에 따라 다릅니다.

네거티브 + 포지티브

음수 마진과 양수 마진의 결과 크기는 대수 합계입니다.

네거티브 + 네거티브

양쪽 여백이 모두 음수이면 양수 + 양수가 있을 때 결과 크기가 비슷합니다. 이것에서 가장 부정적인 것이 이깁니다.

언제?

무너지는 법칙에는 외우기 어렵다는 예외가 많다.
여기 여백이 축소되지 않는 몇 가지 예가 나와 있습니다.

블록 수준이 아닌 요소

Flex Items

Grid Items

Absolutely positioned items

Other non-block-elements

부모 요소의 테두리 또는 안쪽 여백 속성

부모와 첫 번째 자식 사이에 border-top 또는 padding-top이 있는 경우.



부모와 마지막 자식 사이에 border-bottom 또는 padding-bottom이 있는 경우에도 마찬가지입니다.

가로 여백

가로 여백은 축소되지 않습니다.

결론

우리의 삶을 편하게 하자는 아이디어로 나왔지만 마진 붕괴를 다루는 것은 정말 까다로울 수 있습니다. 이것은 주로 발명 이후 많은 규칙과 예외가 증가했기 때문입니다. 기억하고 이해하기 쉬운 한 가지 가능한 솔루션은 요소에 margin-top만 적용하는 것입니다. 가능한 솔루션에 대한 자세한 내용을 보려면 Harry Robert 그의 기사에서 더 논의하십시오.

나를 팔로우하고 이것에 대한 당신의 생각 아래에 댓글을 달아주세요.