CSS div 에 width 와 padding 을 함께 사용시 div 가 늘어나는 현상 > 개발

<div style="width:300px;padding:10px;">
와 같이 width 를 지정한 후에 padding 을 주면, div 가 늘어나 버린다.

이때는, div 를 두개 사용하여 width 와 padding 을 분리하면 된다.

====

Q. How to change a DIV padding without affecting the width/height ?

A. Solution is to wrap your padded div, with fixed width outer div

HTML
[code]
<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->
[/code]

CSS
[code]
.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}
[/code]


* 참고
https://stackoverflow.com/questions/2225585/how-to-change-a-div-padding-without-affecting-the-width-height

추천0