Na przykład pod linkiem: http://4ad.com/releases/20949, jeśli spojrzysz na okładkę albumu w prawej górnej części strony, czarna ramka nie jest kwadratowa: na dole znajduje się kilka dodatkowych pikseli wysokości.Kilka dodatkowych pikseli wysokości - skąd mogą pochodzić?
O ile mogę powiedzieć, obraz ma wymiary 300 x 300 pikseli. Nie ma żadnych oczywistych (dla nas!) Źródeł dodatkowych 4,5 pikseli wysokości. Czy ktoś wie, co może powodować taką rozbieżność?
Ponieważ zdjęcie to inline, jest traktowane jako tekst, co oznacza, że kilka dodatkowych pikseli jest dodawanych do spodu jako wiodące. Wyświetlanie obrazu jako bloku (to jest dodanie display: block;) rozwiązuje ten problem ładnie.
Zmień obraz ma być wyświetlany jako element bloku dodając to ustawienie do style.css plik:
/* consolidate this CSS style */
#rightbox_packshot img {
width: 300px; /* from line 2896 in style.css */
height: 300px; /* from line 1498 in style.css */
display: block;
}
Domyślnie obrazy są wyświetlane jako inline-block i wyrównany z baseline tekstu . Dodatkowe miejsce jest dodawane do Descenders.
Aby to naprawić, należy użyć vertical-align: top lub lub bottom na img. Aby uzyskać różnicę, patrz http://jsfiddle.net/Gu6pG/3.
+1 - Pomógł mi, gdy próbowałem ustalić, skąd pochodzą jakieś tajemnicze dodatkowe piksele. Użycie pionowego wyrównania na elemencie obrazu to poprawiło. :RE –
Alternatywnie można użyć float:left (lub prawej) zamiast display:block, która powoduje, że obraz jest elementem block, ale pozwala zachować dodatkowy tekst (jeśli go masz) w linii.
Tak jest! Dziękuję za skuteczne rozwiązanie, które wyjaśnia również naturę problemu - dokładnie to, czego potrzebowałem! – thesunneversets
Alternatywnie, użyj 'vertical-align: top' lub' middle' lub 'bottom' na obrazie. Zobacz różnicę w http://jsfiddle.net/Gu6pG/1/. – user123444555621
@ Pumbaa80 - Dlaczego nie jest to odpowiedź? Pomogło mi! : D –