CSS 박스 모델 (CSS Box Model) 정리

1. 패딩 : padding

박스 모델의 안쪽 여백을 나타낸다.
숫자의 순서는 시계 방향(0시 --> 3시 --> 6시)이다.

padding: 8px; /* 상하좌우 한 번에 */
padding: 16px 8px; /* 상하, 좌우 */
padding: 16px 8px 24px; /* 상, 좌우, 하 */
padding: 16px; 8px 24px 10px /* 상, 우, 하, 좌 */

padding 속성

패딩 값을 각각 주고 싶을 때 쓰는 속성들이다. 아래 두 코드는 똑같은 코드이다.

padding: 16px 8px 24px 10px;

padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;

---

2. 마진 : margin

박스 모델의 바깥쪽 여백을 나타낸다.
width 속성이 정해져 있다면, 좌우 마진 값을 auto 를 적용해 자동으로 채울 수 있다. (숫자의 순서 역시 시계방향과 같다)

margin: 8px; /* 상하좌우 한 번에 */
margin: 16px 8px; /* 상하, 좌우 */
margin: 16px 8px 24px; /* 상, 좌우, 하 */
margin: 16px; 8px 24px 10px /* 상, 우, 하, 좌 */

width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있다. */
margin: 16px auto; /* 자동으로 채우기 */

margin 속성

마진 값을 각각 주고 싶을 때 쓰는 속성들이다. 아래 두 코드는 똑같은 코드이다.

margin: 16px 8px 24px 10px;

margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;

---

3. 테두리 : border

박스 모델의 테두리를 나타낸다. 굵기, 테두리 종류, 색상 순서로 작성한다.

border: 2px solid #ededed; /* 2px 굵기, 실선, 옅은 회색 */

border-radius

박스 모델이 모서리를 둥글게 만들 때 사용한다. border 속성 없이도 사용할 수 있다.

border-radius: 50%; /* 50%만큼 모서리를 둥글게. 타원 형태로 보임 */

---

4. 기타 속성

box-sizing

기본적으로, 요소에 크기를 지정하면 content 영역에 적용된다.
예를 들어서 아래 #box 요소의 실제 너비는 100 + 30 + 30 = 160 이 된다.

#box {
   margin: 20px;
   padding: 30px;
   width: 100px;
}

더 직관적으로 border 까지의 크기를 박스 모델 크기로 설정하고 싶다면, box-sizing의 속성을 바꿔주면 된다.
다음 코드는 #box 요소 테두리까지 모두 합친 영역의 크기가 100px이 된다.

#box {
   margin: 20px;
   padding: 30px;
   width: 100px;
   box-sizing: border-box; /* 기본값은 content-box */
}

주로 border-box는 모든 요소에 적용하기 때문에, 다음과 같이 전체 요소 선택자 *를 사용해 모든 요소에 적용한다.

* {
   box-sizing: border-box;
}

overflow

박스 안의 내용이 많아 삐져나오는 것을 오버플로우라고 한다. 이때 박스에 스크롤이 되도록 하거나 삐져나온 것을 감출 수 있.

• 참고) white-space : content 안에 있는 공백문자(띄어쓰기, 줄바꿈 등).

.card {
  ...
  overflow: hidden; /* auto: 넘치면 스크롤, scroll: 항상 스크롤 */
  white-space: nowrap; /* 줄바꿈을 하지 않을 때 */
}