CSS 축소 여백: 그 목적은 무엇입니까?

Question

CSS2 상자 모델은 인접한 수직 여백이 축소된다는 것을 알려줍니다.

이는 많은 설계 오류의 원인이기 때문에 매우 짜증나는 일입니다. 여백 축소의 목적을 이해함으로써 이를 언제 사용해야 하는지, 필요하지 않을 때 어떻게 피하는지 이해할 수 있기를 바랍니다.

이 기능의 목적은 무엇인가요?

Answer 1

"여백"의 일반적인 의미는 "10px 이동"을 전달하는 것이 아니라 "이 요소 옆에 10px의 공백이 있어야 합니다"를 전달하는 것입니다.

저는 항상 이것이 단락에서 개념화하기 가장 쉽다는 것을 알았습니다.

문단에만

을 지정하고 다른 요소에는 여백을 지정하지 않으면 일련의 문단이 아름다운 간격으로 배치됩니다. 그러나 물론 단락 아래에 다른 요소를 배치하면 문제가 발생할 수 있습니다. 두 사람은 만질 것이다. margin-top: 10px

여백이 축소되지 않은 경우 이전 코드에

를 추가하는 것을 주저하게 될 것입니다. 왜냐하면 단락 쌍은 20픽셀 떨어져 있지만 단락은 다른 요소와 10픽셀만 떨어져 있기 때문입니다. margin-bottom: 10px

그래서 세로 여백이 무너집니다. 위쪽 및 아래쪽 여백을 10픽셀 추가하면 "다른 요소의 여백 규칙은 신경 쓰지 않습니다. 각 단락 위와 아래에 최소 10픽셀의 여백이 필요합니다."라고 말하는 것입니다.