css 박스모델 속성 정리

박스모델(Box Model)

 

크기 - width, heigth

width : 요소의 너비 설정

heigth : 요소의 높이 설정

- 초기값 : auto

- 상속되지 않음

- 인라인요소에서는 지정되지 않음, display속성으로 block을 지정해주어야함

 

max - width, min - width, max - heigth, min - heigth

-최대, 최소 크기를 지정

 

---

margin  - 네 방향 바깥 여백 영역을 설정

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;

- %로 크기를 설정하게 되면 부모의 width값을 사용하기 때문에 조심해야한다.

 

마진 상쇄(margin collapasing)

- 여러 블록 요소들의 위/아래 margin이 경우에 따라 가장 큰 크기를 가진 margin으로 결합되는 현상

 

1. 인접 형제

- 두 형제 요소의 위/아래 여백이 만나 상쇄된다.

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

 

 

2. 부모-자식요소 간

- 부모 블록에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우

- 부모 블록에 border, padding, inline content가 없고,

부모-자식 분리할 height값이 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

 

3. 빈 블록

- border, padding, inline content가 없고, height 또한 존재하지 않으면, 해당 블록의 margin-top과 margin-bottom이 상쇄된다.

---

padding - 요소의 네 방향 안쪽 여백 영역 설정

/* 네 면 모두 적용 */
padding: 1em;

/* 세로방향 | 가로방향 */
padding: 5% 10%;

/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;

/* 전역 값 */
padding: inherit;
padding: initial;
padding: unset;

- % 사용시 부모 요소의 크기에 대비

---

border - 패딩과 마진 사이의 테두리

- width 두께, style, color 속성 사용 가능

/* 스타일 */
border: solid;

/* 너비 | 스타일 */
border: 2px dotted;

/* 스타일 | 색 */
border: outset #f33;

/* 너비 | 스타일 | 색 */
border: medium dashed green;

/* 전역 값 */
border: inherit;
border: initial;
border: unset;

- 스타일도 여러개를 사용해서 설정 가능

- 스타일이 none면 보이지 않음

---

border-radius : 테두리 경계의 꼭짓점을 둥글게 만든다.

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: unset;

- %를 사용하면 타원형으로 가능

 

---

box-sizing0 - 요소의 너비와 높이를 계산하는 방법을 지정

box-sizing = 
  content-box  |
  border-box

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.