[CSS] width, height, padding, margin

margin, padding 속성의 크기 지정

• 크기 값을 사용하는 경우: 양쪽에 동일한 크기값이 적용
  • ex) margin: 30px
• 두 개의 크기 값을 사용하는 경우: 위쪽 및 아래쪽, 왼쪽 및 오른쪽
  • ex) margin: 30px 5px
• 4 가지 크기 값을 사용할 경우
  • ex) margin: 10px 20px 30px 40px
  • top, right, bottom, left

box-sizing: border-box 적용 전

실제 요소의 크기

• 가로 = width + padding + border

box-sizing: border-box 적용 후

• 가로 = width
• width value를 유지한 상태로 padding과 border를 적용한다.

float

• left: 가로 정방향 배치