Tại sao CSS padding lại tăng kích thước của phần tử?

Tôi đang cố gắng cung cấp cho div và textarea của mình một số đệm. Khi tôi làm điều này, nó sẽ tăng kích thước của phần tử, thay vì thu nhỏ vùng nội dung bên trong nó. Có cách nào để đạt được những gì tôi đang cố gắng làm không?

Bạn có thể thêm box-sizing:border-boxvào phần tử vùng chứa, để có thể chỉ định chiều rộng và chiều cao không thay đổi khi bạn thêm phần đệm và / hoặc đường viền vào phần tử.

Xem tại đây (MDN) để biết thông số kỹ thuật.

Cập nhật (đã sao chép bình luận để trả lời)

Ngay bây giờ, giá trị border-boxđược hỗ trợ trong tất cả các trình duyệt chính, theo Thông số MDN

Tất nhiên, một số trình duyệt yêu cầu tiền tố thích hợp -webkitvà -moznhư bạn có thể thấy rõ ở đây

Theo thông số kỹ thuật CSS2 , chiều rộng hiển thị của một phần tử loại hộp bằng tổng chiều rộng, đường viền trái / phải và phần đệm trái / phải (lề trái / phải cũng có tác dụng). Nếu hộp của bạn có chiều rộng là '100%' và cũng có lề, đường viền và phần đệm, chúng sẽ ảnh hưởng (tăng) chiều rộng mà đối tượng chiếm.

Vì vậy, nếu vùng văn bản của bạn cần phải rộng 100%, hãy gán các giá trị cho chiều rộng, lề trái / phải, viền trái / phải và padding-left / right sao cho tổng của chúng bằng 100%.

Trong CSS3, chúng tôi có ba mô hình định cỡ hình hộp . Bạn có thể sử dụng border-boxmô hình:

Chiều rộng và chiều cao được chỉ định (và các thuộc tính min / max tương ứng) trên phần tử này xác định hộp viền của phần tử. Có nghĩa là, bất kỳ phần đệm hoặc đường viền nào được chỉ định trên phần tử đều được bố trí và vẽ bên trong chiều rộng và chiều cao được chỉ định này. Chiều rộng và chiều cao của nội dung được tính bằng cách trừ chiều rộng đường viền và phần đệm của các cạnh tương ứng với các thuộc tính 'width' và 'height' được chỉ định.

Đây là một mớ hỗn độn trên phần W3C và các trình duyệt khác nhau chỉ thêm vào sự phức tạp này với các phiên bản mô hình hộp của riêng chúng. Cá nhân tôi, thay vì nghĩ rằng trình duyệt hoặc cài đặt CSS nào sẽ thực hiện thủ thuật, tôi chỉ cần bọc nội dung của hộp trong một câu lệnh DIV khác và sử dụng các lề trên DIV đó, thay vì sử dụng đệm, như thế này:

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

Mặc dù điều này chỉ hoạt động đối với các vùng chứa có kích thước cố định

Nó phụ thuộc vào trình duyệt và nó thực hiện mô hình hộp . Những gì bạn đang trải qua là hành vi chính xác.

IE truyền thống đã mắc lỗi: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Đối với một giải pháp nhiều trình duyệt hơn, bạn có thể tránh hành vi này bằng cách gói bất kỳ thẻ nào cần đệm vào một thẻ khác có chiều rộng cố định và đặt chiều rộng: auto. Bằng cách này, nếu phần cha có chiều rộng là x và bạn thêm phần đệm vào phần con, phần tử đó sẽ thừa hưởng toàn bộ chiều rộng của x, áp dụng phần đệm một cách chính xác mà không cần sửa đổi chiều rộng của cha hoặc của phần đệm đó.

Theo mặc định, div có chiều rộng của vùng chứa mẹ, vì vậy để tránh các vấn đề về khả năng tương thích của trình duyệt, bạn có thể thêm div con trong div được chỉ định sau đó thêm phần đệm bắt buộc vào div con .

NB - không chỉ định chiều rộng cho div con vì nó sẽ tăng nếu bạn thêm phần đệm