SonMan's IT BBS: padding, margin 값때문에 width 가 바뀐다면, "box-sizing:border-box;" 을 지정해 해결한다.

2015년 8월 20일 목요일

padding, margin 값때문에 width 가 바뀐다면, "box-sizing:border-box;" 을 지정해 해결한다.

div 판넬을 이용해 작업을 하다보면, 겨우 위치를 잡아서 구성해 놨는데, 그 판넬에 padding 이나 margin 을 줬더니 판넬의 크기도 같이 커져서 겨우 맞워논 위치가 헝클어 지는 경우가 있다.

이것은 width 값에는 padding 값이 포함되어 있지 않기 때문.
하지만 대부분의 경우 구성 틀을 잡을 때는 padding 까지 포함된 크기를 가지고 작업을 해야하니...

이 때는 "box-sizing:border-box;" 속성을 지정해 주면 된다.

<body>
    <form id="form1" runat="server">
    <div>
        <style>
            .box1 {width:100px; background:#eee;}
            .box2 {width:100px; padding:20px; background:#eee;}
            .box3 {width:100px; padding:20px; background:#eee; box-sizing:border-box; }
        </style>

        <p class="box1">Box1</p>
        <p class="box2">Box2</p>
        <p class="box3">Box3</p>
    </div>
    </form>
</body>

이렇게 하면...

이렇게 패딩값을 포함해서 width 를 지정해 준다.