너비 / 높이에 영향을주지 않고 DIV 패딩을 변경하는 방법은 무엇입니까?

93

고정 너비와 높이를 지정하려는 div가 있고 원래 DIV 너비 / 높이를 줄이거 나 늘리지 않고도 변경할 수있는 패딩이 있습니다. CSS 트릭이 있습니까? 아니면 패딩을 사용하는 대안이 있습니까?

css html

— 라이언
소스

72

솔루션은 래핑하는 것입니다 패딩 DIV를 함께 외부 DIV 폭 고정

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.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;
}

— 주 라즈 블라 훈카
소스

명확하게하고 싶지는 않지만 확실하지 않지만 수평 패딩에서만 작동합니까? height : auto는 width : auto처럼 부모를 채우지 않습니다.

— Jonathan Azulay 2013 년

200

CSS에 이것을 선언하면 잘할 것입니다.

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

이 솔루션은 추가 래퍼를 사용하지 않고 구현할 수 있습니다.

이렇게하면 브라우저가 div의 "외부"너비에 따라 너비를 계산하게됩니다. 즉, 너비에서 패딩이 차감된다는 의미입니다.

— adswebwork
소스

그것은 매력처럼 작동합니다 나는 초보자입니다 단지이 속성을 검색하고 그것은 위대한 사람이 작동합니다 .....

— nida

1

그것을 사용할 때주의해야 할 부작용이 있습니까?

— Radi

16

이 솔루션은 더 허용 하나보다, 더 이상 접두사를 사용하지 것이 안전하다 : shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork 제 많은 시간을 절약했습니다. 감사합니다.

— Hardik Chaudhary

17

IE6 박스 모델을 시뮬레이션하려는 것 같습니다. 이를 위해 CSS 3 속성 box-sizing : border-box 를 사용할 수 있습니다. 이것은 IE8에서 지원되지만 Firefox의 경우 사용해야 -moz-box-sizing하며 Safari / Chrome의 경우 -webkit-box-sizing.

IE6는 이미 높이를 잘못 계산 했으므로 해당 브라우저에서 잘하지만 IE7에 대해 잘 모르겠습니다. 쿼크 모드에서 높이를 동일하게 계산할 것이라고 생각합니다.

— Wsanville
소스

css3는 여전히 iPad처럼 매우 새롭습니다. :)

— Ryan

10

이 트릭을 시도

div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}

이렇게하면 브라우저가 div의 "외부"너비에 따라 너비를 계산하게됩니다. 즉, 너비에서 패딩이 차감됨을 의미합니다.

— KA
소스

5

이것은 @adswebwork의 답변과 동일합니다. 나는 그것이 어떻게 작동하는지에 대한 설명을 주셔서 감사합니다,하지만 주석으로 아마 더 나은

— craq

1

동일한 답변을 게시하는 이유

— Andrew

4

일관된 결과 크로스 브라우저를 얻으려면 일반적으로 div내부 에 다른 것을 추가 div하고 명시적인 너비를 지정하지 않고 margin. 는 margin시뮬레이션합니다 padding외부의 div.

— 페카
소스