Đâu là khoảng trống thừa từ những hình ảnh này?

Question

Tôi gặp sự cố mà tôi đã sao chép trong các trình duyệt khác nhau.

Tôi có số div có hình ảnh trong một trình bao bọc http://jsfiddle.net/QnVYL/. Trình bao bọc có đường viền 1px và đệm 5px. Hình ảnh bên trong có kích thước đến 100% chiều rộng.

Vì một số lý do, mặc dù, có nhiều hơn 5px giữa phần dưới cùng của hình ảnh và phần dưới của trình bao bọc của nó. Xem cách padding xuất hiện để được bình đẳng trên tất cả các mặt của hình ảnh? Có vẻ như được thêm 3 pixel từ ... ở đâu đó. Firebug không cho tôi biết từ đâu.

Làm cách nào để thoát khỏi không gian? Tôi không thể sử dụng vị trí tuyệt đối để giả mạo padding bởi vì tôi chưa chắc chắn tôi sẽ luôn luôn biết chiều cao chính xác của hình ảnh.

Trợ giúp được đánh giá cao!

Answer 1

Đó là một vấn đề được biết đến. Hãy thử:

img { 
    display: block; 
}  

Answer 2

Không thêm khoảng cách nếu bạn thêm img {display:block}

http://jsfiddle.net/lexy0202/uxMu9/2

Answer 3

Giống như tôi đoán nó là attribut display:

#container { 
    display:block; 
    width: 50%; 
    margin: auto; 
    margin-top: 100px; 
} 

Answer 4

Đó là chiều cao dòng. Hình ảnh được hiển thị dưới dạng các phần tử khối nội tuyến theo mặc định. Các line-height đảm bảo rằng sau văn bản không dính vào hình ảnh như ở đây:

<img...><br>foo 

Cả các bản sửa lỗi có ích, tùy thuộc vào từng tình huống:

.imgContainer { line-height: 0; } 

img { display: block; }