이해할 수 없는 질문이 있습니다.
1.html에는 h1을 래핑하는 p가 포함되어 있고 h1에는 margin-top이 있습니다. p 내부에 마진을 구현하는 대신 h1의 margin-top이 p 외부에서 버스트되는 이유는 무엇입니까? 2. 구현 방법 p.
에서 감사드립니다.
링크 설명
高洛峰2017-05-19 10:49:56
이 질문은 여러 번 물어보셨는데요, 참고 사항을 알려드리겠습니다
MDN-collapsing margins
Collapsing margins
PHPz2017-05-19 10:49:56
jasonintju 님의 답변을 바탕으로 정리하겠습니다.
자식 요소의 margin-top이 상위 요소보다 크기 때문에 자식 요소의 margin-top을 직접 사용하겠습니다#🎜🎜 #
블록 수준 상위 요소에 상단 테두리, 상단 패딩, 인라인 콘텐츠 및 투명 부동(상단 테두리의 경우)의 4가지 속성이 없는 경우 및 상단 패딩, 상단 여백과 상단 패딩 너비가 0인 경우 이 블록 수준 요소와 해당 첫 번째 하위 요소의 상단 여백은 "서로 가깝다"고 말할 수 있습니다. 이때 블록 수준 상위 요소와 첫 번째 하위 요소의 위쪽 여백은 병합됩니다. 즉, 이때 상위 요소가 표시하는 여백은 바로 상위 요소와 첫 번째 하위 요소가 됩니다. 하위 요소의 여백 상단.
마찬가지로 블록 수준 상위 요소의 margin-bottom과 마지막 하위 요소의 margin-bottom이 테두리, 패딩, 인라인 콘텐츠, 높이, 최소 높이, 최대 높이로 구분되지 않는 경우 상위 요소의 마진이 병합되면 아래쪽 마진이 병합되는 현상이 발생합니다.
