Padding

padding은 요소의 테두리 안과 content 사이의 간격이다. 

padding을 사용하여 스타일을 적용할 때 가장 유의해야할 점을 알아보자.

width를 주의해라!

div 태그의 width 값을 100px로 주고, padding 값을 10px로 주었다. 실제 width 값은 의도치 않게 120px이 되버린다. (padding-right, padding-left 값이 width값에 적용된다.)

이 때 padding값에 상관 없이 div 태그의 width를 100px로 주고 싶다면 box-sizing 속성을 이용하면 좋다.

box-sizing : border-box 값을 주면 요소의 너비는 패딩 값에 영향을 받지 않는다.

 

여기서 참고로 알아두면 유용한 CSS box model

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

 

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin