Loại bỏ không gian bên dưới hình ảnh khối nội tuyến

Question

Làm cách nào để loại bỏ khoảng trống giữa phần dưới cùng của hình ảnh và trình bao bọc, trong khi vẫn giữ hình ảnh dưới dạng khối nội tuyến? Tại sao chuyện này đang xảy ra?

http://jsfiddle.net/dJVxb/2/

HTML:

<div id="wrapper"> 
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >     
</div> 

CSS:

​#wrapper { 
    background:green; 
} 
img { 
    display:inline-block; 
    margin:0; 
} 

Answer 1

Viết vertical-align:top;. Viết như thế này:

img { 
    display:inline-block; 
    margin:0; 
    vertical-align:top; 
} 

Kiểm tra này http://jsfiddle.net/dJVxb/4/

Answer 2

Đó thêm không gian ở đó để nhường chỗ cho xuống của đã có văn bản nội tuyến là tốt. Hậu duệ là một phần của các chữ cái chạm xuống, như trong 'y' và 'g'.

Nếu bạn cần phải giữ lại một tài sản của center hoặc baselinevertical-align, bạn có thể sửa lỗi này bằng cách thiết lập của bạn line-height-0.