CSS 축소 여백의 요점은 무엇입니까?

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

많은 디자인 버그의 원인이되기 때문에 상당히 성가신 일입니다. 마진 축소의 목적을 이해함으로써 언제 사용하는지, 필요하지 않을 때 피하는 방법을 알 수 있기를 바랍니다.

이 기능의 목적은 무엇입니까?

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

나는 항상 이것이 단락으로 개념화하는 것이 가장 쉽다는 것을 발견했습니다.

단락을 제공 margin-top: 10px하고 다른 요소에 여백이 없다면 일련의 단락 간격이 아름답게 배치됩니다. 그러나 물론 단락 아래에 다른 요소를 배치 할 때 문제가 발생합니다. 두 사람은 만질 것입니다.

여백이 무너지지 않으면 margin-bottom: 10px이전 코드 에 추가 하는 것을 망설 일 것입니다. 그러면 한 쌍의 단락이 20px 간격을두고 단락이 다른 요소와 10px 만 분리되기 때문입니다.

따라서 수직 여백이 무너집니다. 10px의 위쪽 및 아래쪽 여백을 추가하면 "다른 요소에 어떤 여백 규칙이 있는지는 신경 쓰지 않습니다. 각 단락의 위와 아래에 최소한 10px의 패딩이 필요합니다."라고 말하는 것입니다.