Tại sao phần tử cấp khối cao hơn hình ảnh chứa nó?

Question

Không có thông số chiều cao, <div> (hoặc <p> hoặc bất kỳ phần tử tương tự nào khác) chỉ chứa một hình ảnh cao hơn một chút so với nó. Dường như nó cao hơn 4px trong Firefox và cao hơn 5px trong Chrome (theo Firebug và tương đương với chrome của nó). Không gian thêm được thêm vào dưới hình ảnh.

Rõ ràng tôi có thể sửa lỗi này bằng cách gán chiều cao cho div, nhưng tôi muốn hiểu tại sao không gian đó ở đó và thời tiết có cách để loại bỏ nó.

Answer 1

Image là phần tử mức nội tuyến, do đó, nó tuân theo cài đặt chiều cao dòng và được đặt ở đường cơ sở của văn bản theo mặc định.

Nếu bạn sẽ thiết lập các hình ảnh có vertical-align: bottom nó sẽ định vị hình ảnh tại dòng gốc (rất đáy của dòng văn bản)

Các tùy chọn khác là để thiết lập hình ảnh để display: block và bỏ qua tất cả mánh lới quảng cáo nội tuyến này

Answer 2

Thêm vào CSS:

img {display: block;} 

Theo mặc định img có display:inline do đó tất cả liên quan đến dòng văn bản thứ.

Answer 3

Thêm line-height: 0px; vào chứa phần tử.

Đặt img thành display:block cũng hoạt động nhưng có thể bị hỏng nếu có nơi nào khác bạn đang ẩn và hiển thị hình ảnh với display:none/display:inline.