Đệm bổ sung trên hình ảnh được liên kết (trong mọi trình duyệt)

Question

Tôi đang gặp vấn đề với việc thêm phần đệm vào phần tử liên kết với hình ảnh bên trong. Nó xảy ra trong tất cả các trình duyệt, Safari, Firefox, IE.

Tôi có bảng định kiểu đặt lại được áp dụng để không có thêm bất kỳ lề nào trên đệm nhưng khi kiểm tra rõ ràng rằng phần tử a có thêm một phần đệm dưới cùng từ hư không. Bất kỳ ý tưởng?

Dưới đây là đánh dấu và CSS:

<div class="movie"><a href=""><img src="img/video01.jpg" alt="" /></a></div>

div.home-col .movie { 
padding: 0 0 11px 0; 
background: url(../img/bg-shadow-movie.png) bottom no-repeat; 
} 

div.home-col .movie a { 
display: block; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
} 

div.home-col .movie img { 
padding: 4px; 
margin: 0; 
border: 1px solid #d0d0d0; 
} 

Answer 1

Hình nền cho lớp phim sẽ xuất hiện ở dưới cùng của cả hộp và padding áp dụng cho nó, vì vậy sử dụng sau đây nếu bạn cần khoảng trống 11px ở cuối hình ảnh.

div.home-col .movie { 
margin: 0 0 11px 0; 
background: url(../img/bg-shadow-movie.png) bottom no-repeat; 
} 

Answer 2

Bạn có cố gắng thêm padding:

div.home-col .movie a { 
display: block; 
padding: 0 0 0 0; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
} 

Nếu không có thể bạn có thể thêm a: visited để kiểm tra nó để xem nếu thay đổi bất cứ điều gì.

Answer 3

Hãy thử thêm dòng sau vào phần tử liên kết của bạn: chiều cao dòng: 0;

div.home-col .movie a { 
display: block; 
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat; 
line-height: 0; 
} 

Answer 4

Bạn có chắc đó là tất cả CSS? Tôi không thể thấy sự cố bạn đang mô tả trên trang kiểm tra này: http://www.pauldwaite.co.uk/test-pages/3532870/

Answer 5

Xin chào tôi đã gặp vấn đề tương tự và tôi thấy rằng nếu bạn căn chỉnh hình ảnh theo chiều dọc, nó sẽ được sửa.

Image inside div has extra space below the image

Answer 6

Thêm style = "padding: 0px;" giải quyết vấn đề cho tôi.

Answer 7

xin lỗi để trả lời câu hỏi này 3 năm sau, nhưng trang này đang ở trang google đầu tiên và tôi cảm thấy có trách nhiệm ..... câu trả lời: chỉ thêm "vertical-align: top;" đến img thẻ bên trong thẻ.