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

Program / 글쓴이

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

답변

솔루션은 래핑하는 것입니다 패딩 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;
}

답변

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

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

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

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

답변

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

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

답변

이 트릭을 시도

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

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

답변

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

답변