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
와 같이 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
댓글목록
등록된 댓글이 없습니다.