[Box model] padding 요소의 크기증가

padding은 요소의 내부 여백을 지정하는 속성이다.

내부 여백을 추가하면 padding 값 만큼 요소의 크기가 커지게 된다.

따라서 크기가 커지지 않도록 padding이 추가된 만큼 width와 height 값을 다시 계산 해야한다.

 

예를 들어 100 X 100 px 크기의 요소를 만든다고 하자

1. 직접 계산

100 X 100 px 의 요소를 만들려면 padding을 통해 커지는 너비를 고려해서 직접 계산해준다.

.box {
   width: 60px;  /* +40px */
   height: 80px;  /* +20px */
   background: red;
   padding: 10px 20px;
}

 

2. 자동 계산

box-sizing: border-box 를 추가하는 방법.

늘어날 크기를 고려하지 않아도 요소의 크기가 늘어나는 것을 막아준다. (자동 계산)

*padding과 동일하게 border도 선을 추가한만큼 요소의 크기가 늘어나므로 border-box를 이용해서 자동계산 해준다.

.box {
   width: 100px;  /* +40px */
   height: 100px;  /* +20px */
   background: red;
   padding: 10px 20px;
   box-sizing: border-box;
}

 

box-sizing

요소의 크기 계산 기준을 지정

값	의미	기본값
content-box	너비(width, height)만으로 요소의 크기를 계산	content-box
border-box	너비(width, height)에 안쪽 여백(padding)과 테두리 선(bordeR)를 포함하여 요소의 크기를 계산