Miejsce pod <img> tag

Question

Mam tę irytującą przestrzeń pod moim zdjęciem bez powodu. Używam www.getskeleton.com jako ramy.

HTML kod

<div class="four columns bottom"> 
    <div class="box"> 
    <img src="images/picture.png" title="" alt=""> 
    </div> 
</div> 

kod CSS

.box{ 
    border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/ 
} 

Answer 1

Choć jestem pewien, że ten został już rozwiązany, wierzę, żadna z tych odpowiedzi są poprawne (lub przynajmniej, powiązanie z "zaakceptowana" odpowiedź jest martwa).

Sposób radzenia sobie z tym problemem dotyczącym odstępów (i dlaczego nie jest ustawiony w bibliotekach takich jak normalizuj Nie jestem pewien) to pionowe wyrównanie obrazu. To rozwiąże go dla stron HTML podczas używania dokumentu HTML 5. Co dziwne, podczas używania np. Dokumentu w formacie HTML 4.01, obrazy nie będą wyświetlać tego błędnego miejsca poniżej zachowania.

Rozwiązaniem:

img { 
    vertical-align: top; 
} 

Mam nadzieję, że pomaga kogoś, kto może biegać w ten problem.

Edytuj: Niektóre dodatkowe informacje zauważyłem po napisaniu tego, a następnie zbadaniu, dlaczego normalizacja nie ustawia wyrównania na znaczniku img; domyślne wyrównanie obrazów to vertical-align: baseline; - takie zachowanie wprowadza przestrzeń pod spodem. Autor Normalize uważa, że ​​zachowanie to jest spójne w różnych przeglądarkach, więc postanowił nie "normalizować" tego. Przypuszczam, że ma to sens, jeśli chcesz, aby tekst znajdujący się obok obrazu poprawnie wyrównał się z kolejnymi wierszami tekstu. Niektórzy ludzie również wolą używać vertical-align: middle w przeciwieństwie do góry, aby rozwiązać ten problem - możesz więc zmieniać to, jak chcesz.

Jednakże, jeśli chodzi o wyrównanie linii bazowej, w przypadku, gdy miałem obraz tak duży, że był on wyższy niż wysokość linii, prawdopodobnie bym go unoszony lub jakieś inne zachowanie ... ale tam udać się.

Używam od czasu do czasu materiałów wyrównanych do pionu już od jakiegoś czasu, bez żadnego incydentu. Ale jak zawsze, upewnij się, że testujesz wszelkie reperkusje dla obrazów, które nie są już dostosowane do linii bazowej.

Answer 2

Spróbuj tego:

.box img { 
    display: block; 
    padding: 0px; 
    margin: 0px; 
} 

Answer 3

Spróbuj tego: .box {rozmiar-czcionki: 0; }

Answer 4

Twój obraz musi być pływający. Spróbuj tego:

#yourimage{ 
     float: left;} 

Answer 5

Jak wspomniano, więcej informacji pomogłoby dużo, ale nie mam wątpliwości, że jest to dopełnienie, który jest przyczyną granicę wyjść obrazu, powodem umieścić w bardzo prosty sposób bycia

margin pushes outside the element 
padding pushes inside the element 

jak było.

Fix następnie:

.box { 
    padding-bottom: 0px; 
} 
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help 
.box img { 
    margin-bottom: 0px; 
} 

Answer 6

To starość dziwactwo - w spacje z formatowania linii powoduje lukę. Dodaj <br /> po obrazie.

Answer 7

użyć dowolnego z tych czterech poprawek usunąć lukę pod obrazem http://www.visibilityinherit.com/code/gap-under-image-example.php