จะเปลี่ยน DIV padding โดยไม่ส่งผลต่อความกว้าง / ความสูงได้อย่างไร?

ฉันมี 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และให้ไม่มีความกว้างที่ชัดเจนและ a margin. marginจะจำลองpaddingสำหรับ div นอก