CSS: 본문 여백 제거

Question

웹 개발이 처음인데 본문 여백을 제거하는 데 문제가 있습니다.

브라우저 상단과 "로고" 텍스트 사이에 공간이 있습니다. 내 코드는 jsbin에 있습니다.

공백을 없애고 싶다면 body { margin: 0;}잘못된건가요?

Answer 1

일부 HTML 요소에는 미리 정의된 여백이 있습니다(예: body、h1 到 h6、p、 >fieldset、form、ul、ol、dl、dir >、菜单、块引用和dd).

귀하의 경우에는 그렇습니다 h1 导致了您的问题。默认情况下它具有 { margin: .67em } . 0으로 설정하면 공백이 제거됩니다.

이러한 문제를 해결하려면 브라우저의 개발자 도구를 사용하는 것이 좋습니다. 대부분의 브라우저: 자세히 알아보려는 요소를 마우스 오른쪽 버튼으로 클릭하고 '요소 검사'를 선택하세요. 스타일 탭의 맨 아래에는 CSS 상자 모델이 있습니다. 이는 테두리, 패딩 및 여백을 시각화하고 스타일 문제의 원인이 되는 요소를 시각화하는 데 유용한 도구입니다.

Answer 2

글로벌 재설정을 사용하는 것은 이 문제를 해결하는 끔찍한 방법이라고 말하고 싶습니다.

으아아아

부모로부터 h1 여백이 나타나는 이유는 부모에 패딩이 없기 때문입니다.

h1의 상위 요소에 패딩을 추가하면 여백은 상위 요소 내부에 있게 됩니다.

패딩과 여백을 모두 0으로 재설정하면 많은 부작용이 발생할 수 있습니다. 그런 다음 해당 특정 제목의 여백을 제거하는 것이 좋습니다.