Tại sao display: block không căng nút hoặc các yếu tố đầu vào

Question

Tôi đang cố gắng để hiểu được lý do đằng sau vấn đề này:

nguyên nhân sâu xa đằng sau <button> hoặc <input> yếu tố không hành xử như các yếu tố khác khi thiết lập để display:block là gì!

Tôi không tìm cách giải quyết sự cố này, vì vậy, vui lòng không chỉ cho tôi this answer vì nó không trả lời câu hỏi.

Here's a js-fiddle that illustrates the problem

Cập nhật 1: @Pete là đúng, thuộc tính kích thước mặc định của một nguyên tố là những gì thiết lập kích thước thậm chí trên khối, như bạn có thể in this fiddle kích thước và cols thuộc tính của <input> và <textarea> thay đổi của họ chiều rộng. Điều đó giải quyết một phần câu hỏi của tôi.

Với ý nghĩ đó, câu hỏi của tôi hiện tại, tại sao yếu tố<button>không hoạt động giống như các phần tử khối khác? Đó là một bí ẩn đối với tôi!

Answer 1

Tôi nghĩ rằng một giá trị mặc định được gán cho các thuộc tính kích thước của đầu vào có nghĩa là trừ khi bạn ghi đè lên nó, chiều rộng của bạn sẽ không được 100%

Nếu bạn nhìn vào firefox specification và di chuyển xuống phần về kích thước, bạn có thể thấy rằng họ có một giá trị mặc định là 20

tôi không chắc chắn về các thuộc tính cho nút đó gây ra điều đó không phải là 100% chiều rộng khi thay đổi để chặn