<img> pozycjonowanie zachowanie

Question

I nie wydaje się owinąć głowę wokół jak img tagi zachowywać się obok tekstu na stronie HTML.

Usunąłem marginesy i dopełnienie, ale nie zawsze wydaje się być jakaś dodatkowa przestrzeń pod img lub innego nieoczekiwanego zachowania. Jestem pewien, że jest to szybkie obejście CSS z wykorzystaniem bezwzględnego pozycjonowania lub ujemnych marginesów, ale szukam bardziej ogólnego rozwiązania.

Pytanie: Może ktoś wyjaśnić jak img tagi są umieszczone, a konkretnie dlaczego oni się przesunięcie w pionie, gdy obok tekstu?

Answer 1

Jeśli chcesz<img> być element inline, można użyć atrybutu vertical-align CSS, aby określić, w jaki sposób obraz zostanie wyrównany względem linii tekstu zamieszczony w. This page ma przykłady pod „vertical- wyrównanie na elementach liniowych ".

Answer 2

Co widzisz pod img jest przestrzeń potrzebna do potomek część glifów jak g lub j. Obraz zachowuje się jak litera i na linii bazowej znajduje się .

img 
{ 
    display: block; 
} 

Naprawię to za Ciebie.

experiement które mogłyby rzucić trochę światła:

<p style="font-size: 1em;">Lorem ipsum dolor <em style="font-size: 800%;">sit</em> amet.</p> 

Pomyśl o <em> jako ~ 128px wysokiej obrazu (jeśli 1em jest 16px, że jest).

Answer 3

IMG się elementy umieszczone tak jak każdy inny inline elementu.

Answer 4

CSS ma dwa typy atrybutów display:: blok i wbudowany.

Inline jest jak tekst. Płynie wzdłuż, zawija na końcu pudełka, takie rzeczy.

Blok jest masywny i ma marginesy i wypełnienie oraz szerokość (obliczone lub wyprowadzone).

To nie ma większego sensu, ale <img> jest w rzeczywistości elementem inline, wraz z <a>, <abbr> i wieloma innymi. To, co się dzieje, to fakt, że obraz jest w rzeczywistości renderowany w przybliżeniu jako odpowiednik liter, a po prostu nie ma on wysokości 12 stóp, ale może 130 pikseli lub jakikolwiek jest twój obraz. Właśnie dlatego się podnosi.

Declare <img style="display:block;" src="image.png" /> dostać to zachowywać się jak pudełka Większość ludzi myśli, że jest.

Answer 5

Jeśli chcesz mieć większą kontrolę nad pozycjonowaniem obrazu, owinąć swój obraz w div i kontrolować pozycjonowanie DIV. Możesz unieść element div, jeśli chcesz zmieszać go z tekstem.

Answer 6

Kluczem do uzyskania tekstu owinąć wokół obrazu jest ustawienie atrybutu pływaka tak:

img { 
float:left; 
display:block; 
} 

Answer 7

To może nie być istotne w tym konkretnym przypadku (mam nadzieję, że rada z poprzednich odpowiedzi powinno rozwiązać problem), ale jeśli zauważysz, że dostajesz niespodziewaną dodatkową przestrzeń wokół elementów, upewnij się, że usunąłeś domyślne wypełnienie, marginesy itp.że przeglądarek często dodają do elementów (i oczywiście różnych przeglądarek często dodają różne ilości wyściółki, marginesy itp

Jeśli upewnij się, że wyzerowany marginesy i dopełnienie itp używając

body { margin: 0; padding: 0; border: 0; } 

u zacznij swój CSS, możesz dodać marginesy itp., nie martwiąc się, że domyślne ustawienia przeglądarki spowodują nieoczekiwane spacje i, miejmy nadzieję, mniej niespójności między przeglądarkami