박스 모델: CSS 백지

요소의 경계선 주위에 둘러싸인 공간은 백지입니다. 백지를 설정하면 요소 외에 추가적인 '백지'를 생성합니다。

백지를 설정하는 가장 간단한 방법은 마진 속성을 사용하는 것입니다. 이 속성은 모든 길이 단위, 백분율 값 또는 부정 값을 받아들입니다。

CSS margin 속성

백지를 설정하는 가장 간단한 방법은 마진 속성。

마진 속성은 픽셀, 인치, 밀리미터 또는 em과 같은 모든 길이 단위를 받아들입니다。

마진은 auto로 설정할 수 있습니다. 더 일반적인 방법은 마진에 길이 값을 설정하는 것입니다. 아래의 선언은 h1 요소의 각 가장자리에 1/4 인치 넓이의 공간을 설정합니다：

h1 {마진 : 0.25in;}

아래의 예제는 h1 요소의 네 가지 가장자리에 다른 백지를 정의한 것입니다. 사용된 길이 단위는 픽셀(px)입니다：

h1 {마진 : 10px 0px 15px 5px;}

내부 마진의 설정과 마찬가지로, 이 값의 순서는 상단 외부 마진(top)에서 시작하여 요소를 원형으로 반시계 방향으로 회전하는 것입니다:

마진: top right bottom left

또한, 마진에 백분율 값을 설정할 수 있습니다:

p {마진: 10%;}

백분율은 부모 요소의 width에 비례하여 계산됩니다. 위의 예제에서 p 요소에 설정된 외부 마진은 부모 요소의 width의 10%입니다.

마진의 기본 값은 0입니다. 따라서 마진에 값을 지정하지 않으면 외부 마진이 나타나지 않습니다. 그러나 실제로는 브라우저는 많은 요소에 대해 사전에 정의된 스타일을 제공합니다. 외부 마진도 예외는 아닙니다. 예를 들어, CSS를 지원하는 브라우저에서는 각 문서 요소의 위와 아래에 '공백 행'이 생성됩니다. 따라서 p 요소에 대한 외부 마진을 지정하지 않으면 브라우저가 자동으로 외부 마진을 적용할 수 있습니다. 물론, 특별히 지정하면 기본 스타일을 대체할 수 있습니다.

값 복사

기억하시나요? 우리는 전 두 장에서 값 복사에 대해 언급했습니다. 아래에서는 값 복사를 사용하는 방법을 설명합니다.

때로는 중복된 값을 입력할 수 있습니다:

p {마진: 0.5em 1em 0.5em 1em;}

값 복사를 통해 이 쌍의 숫자를 반복적으로 입력할 필요가 없습니다. 위의 규칙은 아래의 규칙과 동일합니다:

p {마진: 0.5em 1em;}

이 두 가지 값을 통해 이전 4개의 값을 대체할 수 있습니다. 그렇게 어떻게 가능할까요? CSS는 외부 마진에 4개의 값보다 적은 값을 지정할 수 있는 규칙을 정의했습니다. 규칙은 다음과 같습니다:

  • 왼쪽 외부 마진의 값을 누락하면 오른쪽 외부 마진의 값을 사용합니다.
  • 아래 외부 마진의 값을 누락하면 위 외부 마진의 값을 사용합니다.
  • 오른쪽 외부 마진의 값을 누락하면 위 외부 마진의 값을 사용합니다.

아래 그림은 이를 더 직관적으로 이해할 수 있는 방법을 제공합니다:

CSS 값 복제

다시 말해, 외부 마진에 3개의 값을 지정하면, 4번째 값(즉, 왼쪽 외부 마진)은 2번째 값(즉, 오른쪽 외부 마진)에서 복사됩니다. 2개의 값을 주면, 4번째 값은 2번째 값에서 복사되고, 3번째 값(아래 외부 마진)은 1번째 값(즉, 위 외부 마진)에서 복사됩니다. 마지막 경우, 1개의 값을 주면 다른 3개의 외부 마진은 이 값(위 외부 마진)에서 복사됩니다.

이 간단한 기제를 통해 필요한 값만 지정하면 됩니다. 예를 들어, 모든 4개의 값을 적용하지 않아도 됩니다:

h1 {마진: 0.25em 1em 0.5em;}	/* 0.25em 1em 0.5em 1em와 동일 */
h2 {마진: 0.5em 1em;}		/* 0.5em 1em 0.5em 1em와 동일 */
p {margin: 1px;}			/* 1px 1px 1px 1px와 동일 */

이 방법에는 작은 단점이 있으며, 결국 이 문제를 만날 것입니다. 예를 들어, p 요소의 상단 외부 여백과 왼쪽 외부 여백을 20픽셀로, 하단 외부 여백과 오른쪽 외부 여백을 30픽셀로 설정하고자 한다면, 이 경우 다음과 같이 작성해야 합니다:

p {margin: 20px 30px 30px 20px;}

이렇게 하면 원하는 결과를 얻을 수 있습니다. 그러나 이 경우 필요한 값의 개수를 더 줄일 수는 없습니다.

다른 예제를 보겠습니다. 왼쪽 외부 여백을 제외하고 모든 다른 외부 여백이 auto(왼쪽 외부 여백은 20px)인 경우:

p {margin: auto auto auto 20px;}

그리고 이렇게 하면 원하는 효과를 얻을 수 있습니다. 문제는 이러한 auto를 입력하는 것이 번거롭다는 것입니다. 단면적 외부 여백에만 제어를 하고자 한다면, 단면적 외부 여백 속성을 사용하십시오.

단면적 외부 여백 속성

단면적 외부 여백 속성을 사용하여 요소의 단면적 외부 여백에 값을 설정할 수 있습니다. 예를 들어, p 요소의 왼쪽 외부 여백을 20px로 설정하고자 한다면, margin을 사용하는 것보다 많은 auto를 입력해야 할 필요가 없습니다. 다음과 같은 방법을 사용할 수 있습니다:

p {margin-left: 20px;}

상대적인 측면의 외부 여백만 설정하고 모든 다른 외부 여백에 영향을 미치지 않도록 다음과 같은 속성 중 하나를 사용할 수 있습니다:

규칙 하나에 여러 가지 이러한 단면적 속성을 사용할 수 있습니다. 예를 들어:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

물론, 이 경우 margin을 사용하는 것이 더 쉬울 수 있습니다:

p {margin: 20px 30px 30px 20px;}

단면적 속성이나 margin을 사용하든지 모두 결과는 같습니다. 일반적으로 여러 측의 외부 여백을 설정하려면 margin을 사용하는 것이 더 쉬울 것입니다. 그러나 문서 표시의 관점에서는 실제로 어떤 방법을 사용하든 상관없으며, 따라서 자신에게 더 쉬운 방법을 선택해야 합니다.

힌트와 주석

힌트:Netscape와 IE는 body 태그에 대해 기본 외부 여백(margin) 값이 8px입니다. 그러나 Opera는 이와 다릅니다. 오히려 Opera는 내부 패딩(padding)의 기본 값이 8px로 설정되어 있으므로, 전체 웹사이트의 가장자리 부분을 조정하고 Opera에서 올바르게 표시하려면 body의 padding을 정의해야 합니다.

CSS 외부 여백 예제:

텍스트의 왼쪽 외부 여백 설정
이 예제에서는 텍스트의 왼쪽 외간격을 설정하는 방법을 보여줍니다.
텍스트의 오른쪽 외간격 설정
이 예제에서는 텍스트의 오른쪽 외간격을 설정하는 방법을 보여줍니다.
텍스트의 상단 외간격 설정
이 예제에서는 텍스트의 상단 외간격을 설정하는 방법을 보여줍니다.
텍스트의 하단 외간격 설정
이 예제에서는 텍스트의 하단 외간격을 설정하는 방법을 보여줍니다.
모든 외간격 속성이 하나의 선언에 포함됩니다.
이 예제에서는 모든 외간격 속성을 하나의 선언에 설정하는 방법을 보여줍니다.

CSS 외간격 속성

속성 설명
margin 단축 속성. 모든 외간격 속성을 하나의 선언에서 설정합니다.
margin-bottom 요소의 하단 외간격을 설정합니다.
margin-left 요소의 왼쪽 외간격을 설정합니다.
margin-right 요소의 오른쪽 외간격을 설정합니다.
margin-top 요소의 상단 외간격을 설정합니다.