<div> 태그 width:100%일 때 border 값 있을 경우 100% 초과해서 레이아웃이 깨지는 경우

<div> 태그 width:100%일 때 border 값 있을 경우 100% 초과해서 레이아웃이 깨지는 경우

div 태그에서 width:100%인 경우에 border값을 주게 되면 width가 100%를 넘어서면서 레이아웃이 깨져 문제가 생깁니다. 

border 값을 주더라도 기존 100% 너비를 유지하려면 아래와 같이 CSS를 적용하시면 됩니다.

HTML

<div id="example1"></div>

CSS

#example1 {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}