Cách thêm đệm hoặc đường viền vào một DIV và giữ chiều rộng và chiều cao?

Question

Có cách nào để giữ chiều rộng/chiều cao được thiết lập cho DIV hay không và tăng cường nội dung mà không có DIV phát triển? Xem ví dụ bên dưới. Tôi muốn tất cả các hộp chính xác là 140x140.

HTML:

<div class="box1">Howdy.</div> 
<div class="box2">Howdy.</div> 
<div class="box3">Howdy.</div>​ 

CSS:

.box1 { 
    width: 140px; 
    height: 140px; 
    background: #f66; 
} 

.box2 { 
    width: 140px; 
    height: 140px; 
    background: #66f; 
    padding: 1em; 
} 

.box3 { 
    width: 140px; 
    height: 140px; 
    background: #6f6; 
    border: 1em solid #000; 
} 

Fiddle: http://jsfiddle.net/Wrc5S/

Answer 1

Có bạn có thể sử dụng

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

để thay đổi mô hình hộp để làm cho biên giới và padding interna l đến chiều rộng/chiều cao của bạn, nhưng lề vẫn được thêm vào.

và cập nhật Fiddle

biết thêm thông tin của bạn ở đây css tricks

Answer 2

Có giải pháp cho vấn đề của bạn là hộp kích thước: border-ô; (http://css-tricks.com/box-sizing/, http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html) (hoạt động trong IE8 + và tất cả các trình duyệt hiện đại)

Answer 3

Tùy thuộc vào trình duyệt nào bạn cần hỗ trợ, bạn có thể thay đổi thuộc tính kích thước hộp trên các hộp này thành hộp biên giới. Điều đó sẽ cho phép bạn đặt chiều cao và chiều rộng trên mỗi hộp, không có đệm hoặc đường viền ảnh hưởng đến thứ nguyên bạn đặt. Một vài người đã đề xuất thiết lập toàn cầu này cho tất cả các yếu tố trong quá trình cài đặt lại vì nó giúp mọi thứ trở nên dễ dàng hơn nhiều (và được cho là mô hình kích thước hộp tốt hơn so với mặc định). Để làm điều này, bạn sẽ sử dụng một cái gì đó như:

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

biết thêm thông tin, bao gồm hỗ trợ trình duyệt và một số cảnh báo chung có thể được tìm thấy ở đây: http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 4

Có chỉ trừ gấp đôi đệm hoặc biên giới từ chiều cao và chiều rộng (nói cách khác, trừ các padding hoặc biên từ mỗi bên của div):

.box1 
{ 
    width: 140px; 
    height: 140px; 
    background: #f66; 
} 

.box2 
{ 
    width: 130px; 
    height: 130px; 
    background: #66f; 
    padding: 5px; 
} 

.box3 
{ 
    width: 130px; 
    height: 130px; 
    background: #6f6; 
    border: 5px solid #000; 
} 

fiddle dụ: http://jsfiddle.net/N6BYH/

Answer 5

Phương pháp sạch nhất có lẽ sẽ là để tổ <div> thẻ trong <div> thẻ hiện tại của bạn, và áp dụng các đệm cho họ:

<div class="box" id="box1"><div>Howdy.</div></div> 
<div class="box" id="box2"><div>Howdy.</div></div> 
<div class="box" id="box3"><div>Howdy.</div></div>​ 

CSS:

.div { /* ... */ } 
.div > div { padding: 1em; } /* Apply to all inner divs */ 
#box2 > div { padding: 1em; } /* Only apply to the inner div in #box2 */