Câu trả lời:
Đó là sự thật, cả hai đều - hay chính xác hơn, chúng là các yếu tố "khối nội tuyến". Điều này có nghĩa là chúng chảy nội tuyến như văn bản, nhưng cũng có chiều rộng và chiều cao như các phần tử khối.
Trong CSS, bạn có thể đặt một thành phần display: inline-blockđể làm cho nó sao chép hành vi của hình ảnh *.
Hình ảnh và đối tượng còn được gọi là các phần tử "được thay thế", vì chúng không có nội dung theo từng phần, về cơ bản phần tử được thay thế bằng dữ liệu nhị phân.
* Lưu ý rằng các trình duyệt sử dụng kỹ thuật display: inline(như đã thấy trong các công cụ dành cho nhà phát triển) nhưng chúng đang xử lý đặc biệt cho hình ảnh. Họ vẫn theo tất cả các đặc điểm của inline-block.
imgcác yếu tố không phải inline-blocknhưng thực sự là inlinecác yếu tố. Bạn có thể kiểm tra điều này trong một trình duyệt hiện đại bằng cách nhấp chuột phải vào hình ảnh, nhấp vào "Kiểm tra phần tử", sau đó xem kiểu được tính toán, sẽ hiển thị display: inline. Không có ngữ cảnh khối xảy ra bên trong thẻ, vì vậy không đúng khi gọi nó inline-block. Để biết thêm thông tin về các yếu tố nội tuyến được thay thế, hãy xem câu trả lời của Quentin và bài viết MDN này .
imgcác thành phần là nội tuyến - công cụ phát triển Google Chrome hiển thị imgcác thành phần là nội tuyến. Bài đăng này là nơi duy nhất tôi tìm thấy cho đến nay nói rằng chúng là inline-blockthay thế. Thật thú vị, tôi đã không tìm thấy bất kỳ cơ quan nào nói rằng họ là inlinemột trong hai. Là làm thế nào để điều trị thẻ phụ thuộc vào việc thực hiện, có thể?
display:inline-block.
Một imgphần tử là một phần tử nội tuyến được thay thế .
Nó hoạt động như một yếu tố nội tuyến (vì nó là), nhưng một số khái quát về các yếu tố nội tuyến không áp dụng cho imgcác yếu tố.
ví dụ
Khái quát hóa: "Chiều rộng không áp dụng cho các yếu tố nội tuyến"
Thông số kỹ thuật thực sự nói gì : "Áp dụng cho: tất cả các yếu tố ngoại trừ các yếu tố nội tuyến không thay thế, các hàng trong bảng và các nhóm hàng"
Vì một hình ảnh là một yếu tố nội tuyến được thay thế, nên nó được áp dụng.
Đối với hầu hết tất cả các mục đích, hãy nghĩ về chúng như một yếu tố nội tuyến với tập chiều rộng. Về cơ bản, bạn có thể tự do đưa ra cách bạn muốn hình ảnh hiển thị bằng CSS. Tôi thường đặt một vài lớp hình ảnh như vậy:
img.center {display:block;margin:0 auto;}
img.left {float:left;margin-right:10px;}
img.right {float:right;margin-left:10px;}
img.border {border:1px solid #333;}Bất cứ khi nào bạn chèn một hình ảnh, nó chỉ mất chiều rộng mà hình ảnh ban đầu. Bạn có thể thêm bất kỳ phần tử html nào khác bên cạnh nó và bạn sẽ thấy rằng nó sẽ cho phép nó. Điều đó làm cho hình ảnh trở thành một yếu tố "nội tuyến".
Đó là sự thật, cả hai đều - hay chính xác hơn, chúng là các yếu tố "khối nội tuyến". Điều này có nghĩa là chúng chảy nội tuyến như văn bản, nhưng cũng có chiều rộng và chiều cao như các phần tử khối.