박스 모델

CSS로 요소들의 간격을 맞추기 시작하면 모두가 마주치는 같은 문제를 만나게 됩니다: 너비를 설정하고 패딩을 추가했는데 요소가 요청한 것보다 더 넓어집니다. 두 단락이 숫자가 나타내는 것보다 더 가까이 앉아있습니다. 이 모든 것이 버그는 아닙니다. 이것이 박스 모델로, 모든 요소가 차지하는 공간의 양을 결정하는 규칙 집합이며, 이를 시각화할 수 있으면 대부분의 간격 관련 놀라움은 더 이상 놀라움이 아닙니다.

모든 요소는 박스입니다

CSS는 페이지의 모든 요소를 직사각형으로 취급합니다. 단 한 단어나 링크도 마찬가지입니다. 그 직사각형은 안쪽에서 바깥쪽으로 쌓인 4개의 레이어로 만들어지며, 이것이 **박스 모델**입니다: 중간의 콘텐츠, 그 주위의 패딩, 테두리, 그리고 바깥쪽의 여백입니다.

벽에 걸린 액자 사진을 생각해보세요. 사진이 콘텐츠입니다. 사진 주위의 흰색 매트가 패딩으로, 액자 안의 숨 쉴 공간입니다. 나무로 된 액자 자체가 테두리입니다. 그리고 이 액자와 다음 액자 사이의 빈 벽이 여백입니다. 스타일을 지정하는 모든 요소는 안쪽에서 바깥쪽으로 같은 방식으로 패키징됩니다.

css

.card {
  padding: 16px;              /* 안쪽 공간, 콘텐츠 주위 */
  border: 2px solid #333;     /* 액자 */
  margin: 24px;               /* 바깥쪽 공간, 이웃 요소를 밀어냄 */
}

Juno모든 요소는 박스입니다 모든 요소는 안쪽에서 바깥쪽으로 4개의 레이어를 가진 박스입니다: 콘텐츠, 패딩, 테두리, 여백. 액자 사진 비유가 나에게 와닿았습니다: 사진, 매트, 액자, 다음 액자까지의 간격. 이 그림을 머릿속에 얹으면 이 장의 나머지 부분이 따라옵니다.

padding, border, 그리고 margin

3개의 간격 레이어는 각각 하나의 일을 합니다. **패딩**은 콘텐츠와 테두리 사이의 안쪽 공간입니다. 여백은 바깥쪽 공간이며 다른 요소를 밀어냅니다. 테두리는 그들 사이에 그려진 선입니다.

한 번에 4개의 모든 변에 대해 하나의 값을 설정하거나 한쪽 면을 대상으로 지정할 수 있습니다:

css

.card {
  padding: 20px;             /* 4개의 모든 변이 20px를 받음 */
  margin-bottom: 32px;       /* 아래쪽 끝만 */
}

padding: 20px 축약형은 위, 오른쪽, 아래, 왼쪽을 모두 함께 말하는 빠른 방법입니다. 한쪽이 나머지와 다를 필요가 있을 때는 margin-bottom처럼 구체적인 속성을 사용하세요.

Junopadding, border, 그리고 margin 패딩은 테두리 안의 공간이고, 여백은 테두리 바깥의 공간이며, 테두리는 그들 사이의 선입니다. 텍스트가 박스 안에서 밀착되어 보일 때 padding을 사용하고, 두 박스가 너무 가까울 때 margin을 사용하세요. padding: 20px같은 하나의 값은 4개의 모든 변을 포함하고, 한쪽만 바뀔 필요가 있을 때 margin-bottom처럼 이름을 지정하세요.

box-sizing: content-box vs border-box

거의 모두를 당황하게 하는 놀라움이 여기 있습니다. 카드를 width: 300px로 설정하고 패딩을 추가하면 카드가 페이지에서 300픽셀보다 더 넓어집니다. 당신은 잘못된 것을 하지 않았습니다. 기본적으로 width는 중간의 콘텐츠만 측정하며 패딩과 테두리는 그 위에 추가됩니다.

너비가 예상한 방식으로 작동하게 하는 한 줄의 수정이 있습니다. box-sizing: border-box를 설정하면 이제 입력한 너비는 박스의 전체 너비이며 패딩과 테두리가 포함됩니다:

css

.card {
  box-sizing: border-box;    /* 너비에 이제 패딩과 테두리가 포함됨 */
  width: 300px;
  padding: 20px;             /* 카드는 340px가 아닌 300px로 유지됨 */
}

Junobox-sizing: content-box vs border-box 기본적으로, 설정한 width는 중간의 콘텐츠만 측정하므로 패딩과 테두리는 박스를 입력한 숫자보다 더 크게 만듭니다. box-sizing: border-box를 설정하면 수정됩니다: 너비는 전체 박스, 패딩과 테두리가 포함됩니다. 이것이 오랫동안 나를 당황하게 했으므로 일찍 기억하는 것이 좋습니다.

여백 겹침

한 가지 더 놀라움이 있으며 여백 쌓임에 관한 것입니다. 두 단락을 위아래로 놓고 첫 번째에 24px 아래쪽 여백을, 두 번째에 16px 위쪽 여백을 주면 그들 사이에 40px의 간격을 기대할 수 있습니다. 실제로는 24px를 얻습니다.

이것을 **여백 겹침**이라고 합니다. 두 수직 여백이 만날 때, 브라우저는 그들을 함께 더하지 않습니다. 더 큰 것을 유지하고 더 작은 것을 버립니다. 따라서 더 큰 여백이 이기고 간격은 40px이 아닌 24px입니다. 패딩에서는 절대 일어나지 않으며 위/아래 여백에만 발생합니다.

css

.intro {
  margin-bottom: 24px;
}
.details {
  margin-top: 16px;
  /* 그들 사이의 간격은 24px, 40px이 아님 */
}

Juno여백 겹침 아래쪽 여백이 위쪽 여백을 만날 때, 브라우저는 더 큰 것을 유지하고 더 작은 것을 버립니다. 그들을 추가하는 대신 24px 아래가 16px 위를 만나면 40px이 아닌 24px 간격을 얻습니다. 위/아래 여백에만 발생하며 처음에 모두를 놀라게 합니다.

박스 모델 ​

모든 요소는 박스입니다 ​

padding, border, 그리고 margin ​

box-sizing: content-box vs border-box ​

여백 겹침 ​

박스 모델

모든 요소는 박스입니다

padding, border, 그리고 margin

box-sizing: content-box vs border-box

여백 겹침