Tại sao hình ảnh của tôi có không gian bên dưới?

Question

Hình ảnh có được không gian trống bí ẩn bên dưới, ngay cả khi padding:0;margin:0 được áp dụng.

Demonstration

Các đường viền màu đỏ nên ôm hình ảnh, nhưng có không gian ở phía dưới.

Điều gì gây ra điều này và làm cách nào tôi có thể xóa không gian này?

Answer 1

Hình ảnh (và các phần tử khối nội tuyến nói chung) được coi như một ký tự.

Như vậy, chúng tuân theo quy tắc của đường cơ sở.

Trong văn bản thông thường, đường cơ sở là dòng trên dưới cùng của hầu hết các chữ cái, chẳng hạn như trong câu này.

Nhưng một số chữ cái, chẳng hạn như p, q, j và cứ như vậy, có đuôi rơi xuống dưới đường cơ sở. Để ngăn các đuôi này va chạm với các chữ cái trên dòng tiếp theo, khoảng trống được đặt giữa đường cơ sở và dòng dưới cùng.

Biểu đồ này minh họa các dòng khác nhau được sử dụng bởi văn bản:

(Hình ảnh từ WHATWG)

Vì vậy, hình ảnh được liên kết với đường cuối sân, thậm chí nếu không có văn bản. May mắn thay, sửa chữa rất đơn giản:

img {vertical-align:bottom} 

Điều này sẽ căn chỉnh hình ảnh ở cuối dòng, cũng loại bỏ không gian bí ẩn.

Hãy cẩn thận, nếu hình ảnh của bạn nhỏ (nhỏ hơn chiều cao dòng), bạn có thể bắt đầu thấy không gian bí ẩn xuất hiện phía trên hình ảnh thay thế. Để khắc phục điều này, hãy thêm line-height:1px vào phần tử vùng chứa.

Hy vọng điều này sẽ giúp nhiều người tôi nhìn thấy hỏi về vấn đề này và các vấn đề tương tự!

Answer 2

Thay đổi img đến một yếu tố mức khối

img { 
    display: block; 
} 

cũng sẽ loại bỏ các khoảng trống bên dưới hình ảnh.

Answer 3

séc ra CSS này jsfiddle CSS

div {border:1px solid red;width:100px;line-height:0} 
img {width:100px;}