이해할 수 없는 질문이 있습니다. 1.html에는 h1을 래핑하는 p가 포함되어 있고 h1에는 margin-top이 있습니다. p 내부에 마진을 구현하는 대신 h1의 margin-top이 p 외부에서 버스트되는 이유는 무엇입니까? 2. 구현 방법 p. 에서 감사드립니다.
jasonintju 님의 답변을 바탕으로 정리하겠습니다. 자식 요소의 margin-top이 상위 요소보다 크기 때문에 자식 요소의 margin-top을 직접 사용하겠습니다#🎜🎜 #
블록 수준 상위 요소 및 해당 첫 번째/마지막 하위 요소
블록 수준 상위 요소에 상단 테두리, 상단 패딩, 인라인 콘텐츠 및 투명 부동(상단 테두리의 경우)의 4가지 속성이 없는 경우 및 상단 패딩, 상단 여백과 상단 패딩 너비가 0인 경우 이 블록 수준 요소와 해당 첫 번째 하위 요소의 상단 여백은 "서로 가깝다"고 말할 수 있습니다. 이때 블록 수준 상위 요소와 첫 번째 하위 요소의 위쪽 여백은 병합됩니다. 즉, 이때 상위 요소가 표시하는 여백은 바로 상위 요소와 첫 번째 하위 요소가 됩니다. 하위 요소의 여백 상단. 마찬가지로 블록 수준 상위 요소의 margin-bottom과 마지막 하위 요소의 margin-bottom이 테두리, 패딩, 인라인 콘텐츠, 높이, 최소 높이, 최대 높이로 구분되지 않는 경우 상위 요소의 마진이 병합되면 아래쪽 마진이 병합되는 현상이 발생합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 질문은 여러 번 물어보셨는데요, 참고 사항을 알려드리겠습니다
MDN-collapsing margins
Collapsing margins
jasonintju 님의 답변을 바탕으로 정리하겠습니다.
블록 수준 상위 요소 및 해당 첫 번째/마지막 하위 요소자식 요소의 margin-top이 상위 요소보다 크기 때문에 자식 요소의 margin-top을 직접 사용하겠습니다#🎜🎜 #
블록 수준 상위 요소에 상단 테두리, 상단 패딩, 인라인 콘텐츠 및 투명 부동(상단 테두리의 경우)의 4가지 속성이 없는 경우 및 상단 패딩, 상단 여백과 상단 패딩 너비가 0인 경우 이 블록 수준 요소와 해당 첫 번째 하위 요소의 상단 여백은 "서로 가깝다"고 말할 수 있습니다. 이때 블록 수준 상위 요소와 첫 번째 하위 요소의 위쪽 여백은 병합됩니다. 즉, 이때 상위 요소가 표시하는 여백은 바로 상위 요소와 첫 번째 하위 요소가 됩니다. 하위 요소의 여백 상단.
인용문: https://developer.mozilla.org...마찬가지로 블록 수준 상위 요소의 margin-bottom과 마지막 하위 요소의 margin-bottom이 테두리, 패딩, 인라인 콘텐츠, 높이, 최소 높이, 최대 높이로 구분되지 않는 경우 상위 요소의 마진이 병합되면 아래쪽 마진이 병합되는 현상이 발생합니다.
p와 h1을 분리하고 p에 패딩이나 테두리를 설정하세요