착각할수 있는 문제

요소의 크기에 대한 착각

실제 요소의 크기는 width, height로 결정되지만, padding, border, margin을 포함한 크기를 box-sizing으로 결정할 수 있다.

.box1{
    width: 200px;
    padding: 0 10px;
    border: 1px solid black;
}

.box1의 실제 크기는 222px이다. width는 200px이지만, padding 좌우 각 10px과 border의 좌우 2px를 포함한 크기가 222px이기 때문이다.

가변 padding 계산 공식

빈 공간 / 너비 * 100 = padding 값의 백분율
총 너비가 900px고 빈 공간이 100px이면, 100 / 900 * 100 = 11.11%이다.