여백과 테두리를 제로화하기 위해 CSS 사용

오늘의 웹 브라우저는 모든 종류의 브라우저 간 일관성이 희망적인 생각이었던 미친 날부터 먼 길을왔다. 오늘날의 웹 브라우저는 모두 표준을 준수합니다. 서로 잘 어울리고 다양한 브라우저에서 상당히 일관된 페이지 표시를 제공합니다. 여기에는 최신 버전의 Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari 및 오늘날 웹 사이트에 액세스하는 데 사용되는 수많은 모바일 장치 에서 발견되는 다양한 브라우저가 포함됩니다.

웹 브라우저와 CSS 표시 방법에 대한 진전은 확실하지만 이러한 다양한 소프트웨어 옵션 간에는 여전히 불일치가 있습니다. 일반적인 불일치 중 하나는 브라우저가 여백, 채우기 및 테두리를 기본적으로 계산하는 방법입니다.

상자 모델 효과의 모든 요소가 모든 HTML 요소에 영향을 미치고 페이지 레이아웃을 만드는 데 필수적이기 때문에 일관성없는 표시는 한 브라우저에서는 페이지가 멋지게 보이지만 다른 페이지에서는 약간 벗어날 수 있음을 의미합니다. 이 문제를 해결하기 위해 많은 웹 디자이너가 상자 모델의 이러한 측면을 표준화합니다. 이 방법은 여백, 여백 및 테두리의 값을 "제로 (zeroing out)"라고도합니다.

브라우저 기본값에 대한 참고 사항

웹 브라우저는 모두 페이지의 특정 표시 영역에 대한 기본 설정을 가지고 있습니다. 예를 들어, 하이퍼 링크는 기본적으로 파란색과 밑줄이 그어져 있습니다. 이것은 다양한 브라우저에서 일관되며, 대부분의 설계자가 특정 프로젝트의 설계 요구 사항에 맞게 변경하더라도 모두 동일한 기본값으로 시작한다는 사실로 인해 이러한 변경을보다 쉽게 ​​수행 할 수 있습니다. 안타깝게도 여백, 채우기 및 테두리의 기본값은 브라우저 간 일관성 수준이 동일하지 않습니다.

여백 및 여백 값 정규화

일치하지 않는 상자 모델의 문제를 해결하는 가장 좋은 방법은 HTML 요소의 모든 여백과 채우기 값을 0으로 설정하는 것입니다. 스타일 시트에 CSS 규칙을 추가하는 방법은 몇 가지가 있습니다.

* {margin : 0; 패딩 : 0; }

이 CSS 규칙은 * 또는 와일드 카드 문자를 사용합니다. 이 문자는 "모든 요소"를 의미하며 기본적으로 모든 HTML 요소를 선택하고 여백과 패딩을 0으로 설정합니다.이 규칙은 외부 스타일 시트에 있기 때문에 매우 명확하지 않지만 기본 브라우저보다 높은 특이성을 갖습니다 가치가 있습니다. 이러한 기본 설정은 덮어 쓰는 항목이므로이 스타일은 사용자가 설정하려고하는 것을 성취합니다.

또 다른 옵션은 HTML 및 body 요소에이 값을 적용하는 것입니다. 페이지의 다른 모든 요소는이 두 요소의 자식이므로 CSS 캐스케이드는이 값을 다른 모든 요소에 적용해야합니다.

html, body {margin : 0; 패딩 : 0; }

이렇게하면 모든 브라우저에서 동일한 위치에서 디자인이 시작되지만 기억해야 할 것은 한 번만 모든 여백과 패딩을 해제하면 모양을 얻기 위해 웹 페이지의 특정 부분을 선택적으로 다시 켜야한다는 것입니다 당신의 디자인이 요구하는 느낌.

테두리

"기본적으로 body 요소 주위에 경계선이없는 브라우저는 없습니다"라고 생각할 수도 있습니다. 이것은 엄격하게 사실이 아닙니다. Internet Explorer의 이전 버전은 요소 주위에 투명하거나 보이지 않는 경계선이 있습니다. 테두리를 0으로 설정하지 않으면 테두리가 페이지 레이아웃을 엉망으로 만들 수 있습니다. 이러한 구식 버전의 IE를 계속 지원하기로 결정했다면 다음과 같이 본문 및 HTML 스타일에 추가하여이 문제를 해결해야합니다.

HTML, body {
여백 : 0px;
패딩 : 0px;
border : 0px;
}

여백과 여백을 해제 한 것과 마찬가지로이 새로운 스타일은 기본 테두리를 해제합니다. 이전 기사에서 설명한 와일드 카드 선택기를 사용하여 동일한 작업을 수행 할 수도 있습니다.

Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 9/27/16에 편집 됨.