Dấu/lề bí ẩn xuất hiện sau khi hình ảnh ở chế độ nghiêm ngặt

Question

Tôi đã tạo một tài liệu mới với cả xhtml 1.0 và html 4.01 STRICT chỉ để cô lập điều này. Tất cả những gì tôi có trong nội dung của nó là:

<div style="border: blue 3px solid;"> 
<img src="testimage.jpg" width="800" height="400"> 
</div> 

Kết quả là bình thường ngoại trừ khoảng cách 5px bên dưới hình ảnh biến mất nếu tôi thay đổi loại tài liệu thành chuyển tiếp. Nó cũng biến mất nếu tôi đặt hiển thị: chặn hình ảnh.

Bạn có thể xem kết quả mình đây (Tôi biết các khoảng trắng bên phải là bình thường vì một yếu tố khối của nó): http://i52.tinypic.com/2prd1jd.jpg

Tôi đã cố gắng thiết lập lề/padding để 0, ngay cả điều này:

* 
{ 
    margin: 0; padding: 0; 
} 

nhưng vẫn giữ nguyên.

Có ai vui lòng giải thích hành vi này không?

Answer 1

Nó phải làm với căn chỉnh hình ảnh theo chiều dọc. Hãy thử điều này:

img{ 
vertical-align: top; 
} 

và không gian sẽ biến mất.

Để làm rõ, nếu bạn đặt một số văn bản bên cạnh hình ảnh, bạn sẽ thấy vấn đề. Hình ảnh được căn chỉnh với phần gốc của văn bản nhưng các chữ cái như y và g sẽ nằm dưới dòng đó. Không gian thêm là dành cho những lá thư nhô ra.

Answer 2

Điều này là do, như được đề cập bởi @Pawel, "theo mặc định, hình ảnh được hiển thị nội tuyến". Vì nó là "inline" một số không gian dưới đây sẽ được cung cấp cho các ký tự như 'g, j, q, y' vv

• Hình ảnh từ: https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps.

Vì vậy, một giải pháp khác là chỉ cần thiết lập các hình ảnh như khối:

img { 
    display:block; 
} 

Một ví dụ là ở đây: https://gist.github.com/MrCoder/450783bc33d6b412075d