DIV에 Padding(여백)을 포함한 Width(너비)를 지정하는 방법

1. 문제상황

---

기본적으로 우리는 DIV를 만들때 Padding(여백)을 포함한 너비를 지정하고자 한다. 하지만 항상 너비 + 여백이 총너비가 되어버려서 항상 100%를 넘는 문제를 직면하곤 한다. 이러한 문제를 어떻게 하면 해결 할 수 잇을까?

2. 해결방안

---

HTML

<div class="box"></div>
<div class="box"></div>

CSS

.box:first-child {    
    border : 1px solid red;
    width : 300px;
    height : 300px;
    padding : 50px;
}

.box:last-child {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border : 1px solid red;
    width : 300px;
    height : 300px;
    padding : 50px;
}

첫번째 BOX는 총 너비가 padding + width이고 두번째 BOX는 총너비가 width이다 즉 두번째 박스는 여백을 포함한 너비이다.

설정하는 방법은 CSS에 아래 코드를 삽입하면 된다.

     box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

See the Pen qQvgOX by 정황진 (@ghkdwls30) on CodePen.