박스 속성 ( margin / border / padding / width / height )

박스 속성

• margin
• border
• padding
• width
• height

margin

• 테두리와 다른 태그 사이의 테두리 바깥쪽 여백
• 해당 요소 기준 바깥쪽 여백

border

• 테두리
  • border-width
  • border-style
  • border-color
  • border-radius("왼쪽 위" "오른쪽 위" "오른쪽 아래" "왼쪽 아래")
  • border-left/right/top/bottom

padding

• 테두리와 글자 사이의 테두리 안쪽 여백
• 배경색은 padding 영역까지만 적용

ex) width 100px, height 10px인 div에 padding 20px 주면, div 내부 글씨 표현되는 영역 != 80px * 80px

     -> 여전히 100px * 100px

     이유 : padding은 테두리와 글자 사이의 안쪽 여백이기 때문

width

• 글자를 감싸는 영역의 가로 크기

height

• 글자를 감싸는 영역의 세로 크기

 

태그 전체 크기

• 전체 너비 = width + 2 * (margin + border + padding)
• 전체 높이 = height+ 2 * (margin + border + padding)

 

margin과 padding 속성 지정 방법

• 네 방향 속성 지정 -> (위쪽 오른쪽 아래쪽 왼쪽)
• 두 방향씩 속성 지정 -> (위아래 왼/오른쪽)