CSS padding에 %값을 주면?

padding 값으로 px단위가 아닌 %값을 준다면?

px단위가 아닌 %값은 부모요소를 기준으로 한다. 예를 들어 가로 세로 넓이가 모두 200px인 정사각형 박스의 하위 요소 박스에 50%를 준다면 가로 세로 넓이가 100px인 박스가 만들어진다. 부모 요소를 기준점으로 삼기때문인데, padding 값으로 %을 준다면 어떻게 되는 것일까? 어떤 것을 기준으로 할까?

 

정답은 부모 요소의 너비를 기준으로 한다.

 

<div class="parent">
    <div class="child">&nbsp;</div>
</div>

.parent{
    height: auto;
    width: 200px;
    background-color: #a00;
}
.child{
    padding: 25px;   // 25%로 바꿔보자.
    background-color: #0a0;
}

자식 요소의 padding 값을 25%으로 바꾸고 검사도구를 통해 레이아웃을 확인해보자.

부모요소의 가로너비 200px의 25%로 50px이 된다. 

 

 

참조

자식 요소의 % 패딩(% padding) 값은 부모 요소의 너비 값을 기준으로 정해진다.