Thêm phần đệm mà không thay đổi chiều rộng tổng thể

Question

Làm cách nào để thêm phần đệm vào phần tử mà không cần thêm trên đầu chiều rộng được xác định trước?

Tốt để xác định chiều rộng của cột để tạo lưới sạch cho bố cục; nhưng cũng muốn thêm phần đệm vào nội dung bên trong cột. Bất kỳ cách nào để xác định điều đó?

Answer 1

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

Answer 2

Sử dụng hộp kích thước, nó làm cho đệm bao gồm: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

Ví dụ:

div { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; /* Firefox */ 
    -webkit-box-sizing:border-box; /* Safari */ 
} 

Nó đáng chú ý rằng điều này sẽ không hoạt động trên IE7.

Đối với IE8, vui lòng xem câu trả lời trên xuống Q này: box-sizing: border-box => for IE8?

Answer 3

Mỗi lần bạn thêm đệm để ngăn chặn yếu tố, chiều rộng của này thay đổi phần tử. Vấn đề này có nhiều giải pháp. Tôi thường đặt margin thành phần tử con đầu tiên và đặt width: 100% cho phần tử này.

Ví dụ, ta có:

<div id="main"> 
    <div id="child"> 
     This is content with margin 
    </div> 
</div> 

CSS phong cách cho các yếu tố:

#main { 
    border: solid 1px red; 
    float: left; 
    width: 5em; 
} 

#child { 
    border: solid 1px blue; 
    float: left; 
    width: 100%; 
    margin: 0.5em; 
} 

Đây là một giải pháp cho bất kỳ trình duyệt

Answer 4

Đây là một chủ đề cũ, tôi biết. Nhưng lần trước tôi có một lỗ đen hoàn chỉnh về việc tạo ra một DIV với chiều rộng không được thiết lập và với các miếng đệm, vì vậy nó sẽ không thổi lên hàng 3 cột của tôi và với CSS2. Vì vậy, tôi đặt một DIV với phao trái, ở bên phải và giữa chúng một DIV không có phao và không có chiều rộng cố định, nhưng tôi muốn có đệm trong đó. Làm thế nào về điều đó ...

Tôi đã giơ lên. : D Nhưng tôi đặt một DIV bên trong ở giữa và cho chiều rộng = 90%. Cho đến nay rất tốt, một giải pháp rất đơn giản và không tuyệt vời, nhưng đôi khi nó giúp đạt được cái nhìn bạn cần. ;]

b.r.