CSS에서 box 유형 다루기

1. border : 엘리먼트의 테두리 지정

  ; border-top, border-left, border-right, border-bottom (개별 지정 가능)

2. padding : border와 내용 사이의 여백 지정

  ; padding-top, padding-left, padding-right, padding-bottom (개별 지정 가능)

3. margin : border 바깥 여백 지정

  ; margin-top, margin-left, margin-right, margin-bottom (개별 지정 가능)
  ; margin: top left bottom right (순서로 값 지정)
  ; margin: top/bottom left/right (두 개의 값으로 지정 가능)
  ; margin: 값 (한 개의 값을 모든 방향에 적용)
  ; 상하의 엘리먼트 마진 값들은 더하는 것이 아니라 큰 값을 적용하게 된다.
* border, padding, margin 모두 사용법은 margin 과 같다.
* margin 의 경우 상하가 겹칠경우에는 큰 값으로 결정이 된다.

하지만 좌우로 margin이 겹칠 경우에는 각각의 값을 더한 값과 같다.

4. width, height: 젋이, 높이 지정