박스 속성 (Box Model)

​

1. width와 height

컨텐츠의 가로, 세로 크기 지정

​

2. border : 테두리 속성

- Top, Left, Bottom, Right

- 선의 두께(border-width), 형태(border-style), 색상(border-color) 지정 가능.

위의 속성을 순서대로 한번에 지정하는 것도 가능하다. 예) border: 1px solid black;

- border-radius : 테두리에 둥근 사각형이나 원을 표현하는 속성

- table의 border 속성들

> border-spacing : 테두리 간의 간격

> border-collapse : 선 분할 여부 (seperate, collapse)

​

3. margin

요소와 요소 사이의 간격 (박스와 박스 사이의 간격)

- 마진 적용 순서: Top, Right, Bottom, Left;

margin : 10px 20px 30px 40px;

margin : 10px 20px;

margin : 10px;

- 부모의 요소에 margin-top : 10px;

자식의 요소에 margin-top : 40px;

→ 둘 중에 큰 값이 적용되어 부모 요소에 overflow: hidden; 적용

​

4. padding

테두리와 부모태그의 컨텐츠 사이의 간격 (테두리와 컨텐츠 사이의 간격)

- 사용 방법은 margin과 동일

- padding을 사용하면 수치만큼 박스가 확장

- box-sizing

> content-box : 패딩 추가 시 확장 (기본 값)

> border-box : 패딩 추가 시 확장 안됨