Dziwny problem z wyściółką wokół obrazu

Question

Mam dziwny problem. Chcę obramować obraz, ale pokazuje trochę miejsca na dole. Proszę spojrzeć tutaj: http://jsfiddle.net/4WKJY/ Nie chcę ustawiać stałej wysokości i szerokości. Dzięki za pomoc.

Answer 1

Można to naprawić, wprowadzając img display:block w swoim CSS, as seen here.

Answer 2

Alternatywnie zastosować css wyłącznie do obrazów:

.thumb img{ 
position: relative; 
padding:2px; 
float: left; 
margin: 0px 0px 5px 5px; 
border: solid 1px #ccc; 
} 

Answer 3

przeciwieństwie do innych odpowiedzi, to nie ma nic wspólnego z białych znaków w znacznikach i usuwanie białych znaków nie będzie to naprawić.

Problem polega na tym, że obrazy są inline domyślnie wartość początkowa dla wyrównania w pionie jest baseline. Oznacza to, że obraz jest traktowany tak, jakby był jakimkolwiek innym komponentem tekstowym strony, a przestrzeń jest zarezerwowana pod treścią tekstową dla potomków - ogony na literach takich jak małe litery "j" itd.

Aby to naprawić, albo musisz powiedzieć silnikowi renderującemu, że obraz nie powinien być traktowany jak treść tekstowa - zrobi to .thumb img { display: block; } - lub możesz nakazać silnikowi renderowania, aby nie rezerwował miejsca dla elementów podrzędnych, a zamiast tego wyrównywał zawartość do samego dołu - .thumb img { vertical-align: bottom; } to.

Edycja: Wydaje mi się przypomnieć, że starsze wersje Internet Explorer nieprawidłowo obsłużyć spacje, więc usunięcie spacji może mieć wpływ tam, ale to, co powiedziałem wyżej stoi; usunięcie białych znaków nie jest rozwiązaniem dla tego problemu w wielu przeglądarkach.