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

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

---

고정 너비와 높이를 지정하려는 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; 
}

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

---

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.

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