CSS2 상자 모델은 인접한 수직 여백이 축소된다는 것을 알려줍니다.
이는 많은 설계 오류의 원인이기 때문에 매우 짜증나는 일입니다. 여백 축소의 목적을 이해함으로써 이를 언제 사용해야 하는지, 필요하지 않을 때 어떻게 피하는지 이해할 수 있기를 바랍니다.
이 기능의 목적은 무엇인가요?
P粉2765774602023-10-26 15:56:17
"여백"의 일반적인 의미는 "10px 이동"을 전달하는 것이 아니라 "이 요소 옆에 10px의 공백이 있어야 합니다"를 전달하는 것입니다.
저는 항상 이것이 단락에서 개념화하기 가장 쉽다는 것을 알았습니다.문단에만
을 지정하고 다른 요소에는 여백을 지정하지 않으면 일련의 문단이 아름다운 간격으로 배치됩니다. 그러나 물론 단락 아래에 다른 요소를 배치하면 문제가 발생할 수 있습니다. 두 사람은 만질 것이다. margin-top: 10px
를 추가하는 것을 주저하게 될 것입니다. 왜냐하면 단락 쌍은 20픽셀 떨어져 있지만 단락은 다른 요소와 10픽셀만 떨어져 있기 때문입니다. margin-bottom: 10px