Phần đệm bổ sung dưới một thẻ <img>?

Question

Tôi nhận được một số loại đệm bên dưới thẻ img trong trang web của mình. Html trông giống như:

<li> 
    <div>Title</div> 
    <img src='...' width='60px' height='60px' /> 
</li> 

Vâng, có khoảng 5 pixel đệm bên dưới hình ảnh (tôi có thể biết vì màu bg của mục cha mẹ khác nhau). Tôi đã thử gán một lớp cho thẻ img với padding/margin/border tất cả được đặt thành 0, nhưng không thay đổi. Tôi tự hỏi nếu có bất cứ điều gì tôi đang thiếu về img thẻ có thể gây ra padding này xuất hiện?

Khi tôi loại bỏ các thẻ img, và chỉ rời khỏi 'tiêu đề' div, padding thêm đã biến mất,

Cảm ơn

------------- Cập nhật - ------------------

Điều này chỉ xảy ra trên FF, chrome và safari trông ok. Firebug cũng cho thấy phần đệm là một phần của phần tử img.

Answer 1

Điều gì xảy ra nếu bạn buộc lề đệm và đường viền tới 0 trên các phần tử img? Bạn đang làm việc với Firebug?

Answer 2

Tôi nghĩ bạn có thể thấy không gian sau hình ảnh của bạn trước khi kết thúc mục danh sách. Hãy thử loại bỏ các khoảng trắng trong html của bạn, như thế này:

<li><div>Title</div><img src='...' width='60px' height='60px' /></li> 

Answer 3

Bạn có thể cung cấp một liên kết hoặc mã hơn để cho phép một độ phân giải tốt hơn về vấn đề của bạn, nhưng:

1. Xác minh nếu hình ảnh của bạn được 60px 60px bởi như thiết lập trong thẻ img của bạn

2. Remove padding và margin và biên giới từ img của bạn, bạn có thể có một thiết lập mặc định cho img thẻ gây ra những gì bạn đang trọng tài

3. Không gian thêm dưới img của bạn có thể xuất phát từ các yếu tố khác trong trang của bạn, có nghĩa là với img tại chỗ, một số lực lượng yếu tố đó thêm không gian

Answer 4

Nếu bạn có thể thiết lập phong cách của hình ảnh display đến block để giải quyết vấn đề. Việc đặt vertical-align thành bottom hoặc middle cũng sẽ hoạt động. Tôi nghĩ vấn đề xuất hiện vì Firefox cố gắng định vị các hình ảnh nội tuyến để cạnh dưới của chúng được căn chỉnh với đường cơ sở của văn bản, và do đó có khoảng trống bên dưới hình ảnh cho các phần tử văn bản.

Answer 5

Chỉ cần thêm thuộc tính chiều cao vào hình ảnh trong thẻ kiểu, như nếu bạn cần một đường kẻ mỏng thì cần chỉ định 1px bên ngoài cho safari.