vấn đề đệm lạ xung quanh hình ảnh

Question

Tôi đang gặp vấn đề lạ. Tôi muốn đặt đường viền xung quanh hình ảnh, nhưng nó cho thấy một số không gian ở phía dưới. Vui lòng xem tại đây: http://jsfiddle.net/4WKJY/ Tôi không muốn đặt chiều cao và chiều rộng cố định. Cảm ơn vì bất kì sự giúp đỡ.

Answer 1

Bạn có thể sửa lỗi bằng cách đặt img display:block trong CSS, as seen here.

Answer 2

Ngoài ra, áp dụng css chỉ để hình ảnh:

.thumb img{ 
position: relative; 
padding:2px; 
float: left; 
margin: 0px 0px 5px 5px; 
border: solid 1px #ccc; 
} 

Answer 3

Trái ngược với câu trả lời khác, nó không có gì để làm với khoảng trắng trong đánh dấu, và loại bỏ các khoảng trắng sẽ không sửa lỗi này.

Vấn đề là hình ảnh được đặt nội tuyến theo mặc định và giá trị ban đầu cho căn chỉnh dọc là baseline. Điều này có nghĩa là hình ảnh được coi như là bất kỳ thành phần văn bản nào khác của trang và không gian được đặt trước nội dung văn bản cho hậu duệ - đuôi trên các chữ cái như chữ thường 'j', v.v.

Để khắc phục điều này, bạn cần phải nói với công cụ hiển thị rằng hình ảnh không được xử lý như nội dung văn bản - .thumb img { display: block; } sẽ làm điều này - hoặc bạn có thể yêu cầu công cụ hiển thị không đặt trước dung lượng cho hậu duệ và thay vào đó sắp xếp nội dung ở phía dưới cùng - .thumb img { vertical-align: bottom; } sẽ làm điều này.

Chỉnh sửa: Dường như tôi nhớ lại các phiên bản cũ của Internet Explorer xử lý không chính xác khoảng trắng, vì vậy việc xóa khoảng trắng có thể có hiệu lực ở đó, nhưng những gì tôi đã nói ở trên vẫn là viết tắt; loại bỏ khoảng trắng không phải là bản sửa lỗi giữa các trình duyệt cho vấn đề này.