Làm cách nào để thay đổi phần đệm DIV mà không ảnh hưởng đến chiều rộng / chiều cao?

93

Tôi có một div mà tôi muốn chỉ định chiều rộng và chiều cao CỐ ĐỊNH, đồng thời có thể thay đổi phần đệm mà không làm giảm chiều rộng / chiều cao DIV ban đầu hoặc tăng nó, có thủ thuật CSS nào cho điều đó không hoặc một giải pháp thay thế bằng cách sử dụng đệm?

css html

— Ryan
nguồn

72

Giải pháp là bọc div đệm của bạn , với div bên ngoài có chiều rộng cố định

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

— Juraj Blahunka
nguồn

Tôi không chắc chỉ làm rõ, nhưng điều này sẽ chỉ hoạt động cho đệm ngang phải không? Như chiều cao: tự động không điền vào cha mẹ như chiều rộng: tự động không.

— Jonathan Azulay

200

Khai báo điều này trong CSS của bạn và bạn nên:

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

Giải pháp này có thể được thực hiện mà không cần sử dụng thêm trình bao bọc.

Điều này sẽ buộc trình duyệt tính toán chiều rộng theo chiều rộng "bên ngoài" của div, có nghĩa là phần đệm sẽ bị trừ đi chiều rộng.

— adswebwork
nguồn

nó hoạt động như một nét duyên dáng i am newbie chỉ cần tìm kiếm khách sạn này và nó hoạt động vĩ đại Man .....

— Nida

1

Có bất kỳ tác dụng phụ nào mà tôi nên lưu ý khi sử dụng không?

— Radi

16

Giải pháp này là tốt hơn so với một được chấp nhận, và nó là an toàn để không sử dụng tiền tố nữa: shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork Bạn đã tiết kiệm được lượng lớn thời gian của mình. Cảm ơn bạn.

— Hardik Chaudhary

17

Có vẻ như bạn đang muốn mô phỏng mô hình hộp IE6. Bạn có thể sử dụng thuộc tính CSS 3 box-sizing: border-box để đạt được điều này. Điều này được hỗ trợ bởi IE8, nhưng đối với Firefox bạn sẽ cần sử dụng -moz-box-sizingvà đối với Safari / Chrome, hãy sử dụng -webkit-box-sizing.

IE6 đã tính sai chiều cao, vì vậy bạn sử dụng tốt trình duyệt đó, nhưng tôi không chắc về IE7, tôi nghĩ nó sẽ tính toán chiều cao giống nhau trong chế độ quirks.

— wsanville
nguồn

css3 vẫn còn rất mới như iPad :)

— Ryan

10

thử thủ thuật này

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

điều này sẽ buộc trình duyệt tính toán chiều rộng theo chiều rộng "bên ngoài" của div, điều đó có nghĩa là phần đệm sẽ bị trừ đi so với chiều rộng.

— KA
nguồn

5

cái này giống với câu trả lời của @ adswebwork, phải không? Tôi đánh giá cao lời giải thích về cách nó hoạt động, nhưng điều đó có lẽ tốt hơn như một nhận xét

— craq

1

tại sao lại đăng một câu trả lời giống hệt

— Andrew

4

Để đạt được kết quả nhất quán trên nhiều trình duyệt, bạn thường sẽ thêm một kết quả khác divvào bên trong divvà cung cấp cho không có chiều rộng rõ ràng, và a margin. Các marginsẽ mô phỏng paddingcho div bên ngoài.

— Pekka
nguồn