đầu vào và văn bản xuất hiện chiều rộng khác nhau khi được đặt thành cùng chiều rộng?

Question

Khi tôi đặt chiều rộng của đầu vào và vùng văn bản thành 94%, chúng có chiều rộng hơi khác một chút. Đây là điều tôi đã thấy nhiều lần trên nhiều trang web.

Có ai có thể giải thích tại sao văn bản không rộng bằng đầu vào khi được đặt thành cùng độ rộng% không?

input, textarea { 
    width: 94%; 
} 

Answer 1

1. Đừng quên the box model bao gồm biên giới, đệm, và lợi nhuận. Tất cả chúng đều ảnh hưởng đến chiều rộng vật lý thực tế của một phần tử trong trang.
2. Trừ khi bạn sử dụng CSS reset, bạn đang ở lòng thương xót của các bảng định kiểu trình duyệt mặc định, thiết lập các đường viền, phần đệm và lề khác nhau cho từng phần tử.

Answer 2

Với CSS3 bạn cũng 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+ */