Cum să eliminați indentarea inutilă de la img în interiorul blocului, vaden pro

Destul de des, aspectul se confruntă cu problemele de plasare a elementelor pe pagină datorită prezenței unei indentări inutile în anumite situații. Articolul va lua în considerare cazul în care imaginea este plasată în interiorul blocului, rezultând o indentare necunoscută. Aici veți găsi o explicație și o soluție la această problemă.







Cum să eliminați indentarea inutilă de la img în interiorul blocului, vaden pro

Ca și în viața obișnuită, există situații anormale în aspect, care sunt greu de explicat. Aceasta este situația care poate apărea atunci când eticheta pentru inserarea imaginilor (img) este inserată într-un container care are proprietățile unui element bloc sau unui obiect plutitor. Confuzia acestei situații constă într-o indentare incomprehensibilă care apare sub imagine.

Să luăm în considerare un exemplu practic

Deci, pentru claritate și o mai bună percepție a problemei, propun să privim totul și, ca să spunem așa, să "simt" în practică. Luați orice imagine și puneți-o pe div. Mai jos puteți vedea un exemplu de cod:

Când decorăm stilurile, umplem fundalul interior al blocului cu culoarea roșie. În condiții normale, imaginea va ocupa integral întregul loc din interiorul blocului și va bloca fundalul roșu. Vom scrie codul pentru înregistrare







Ca rezultat, browserul ne va arăta următoarea imagine

Cum să eliminați indentarea inutilă de la img în interiorul blocului, vaden pro

Judecând după banda roșie din partea inferioară a containerului, se poate afirma că are loc o indentare incomprehensibilă. Folosind panoul webmasterului din browser, a devenit cunoscut faptul că linia a fost de 5.511 pixeli.

Foarte amuzant este faptul că în toate browserele populare această eroare este prezentă, dar toate cele mai iubite Internet Explowerd funcționează perfect în acest caz.

Indiciu de motivare

Ca persoană cu o educație tehnică superioară, vă pot asigura că nimic nu se întâmplă exact așa, există motive pentru tot. După ce am abordat această problemă, am fost din nou convins de acest lucru. Toată rușinea se află în proprietățile standard ale elementelor. Implicit, eticheta img are proprietățile unui element rând, ceea ce înseamnă că elementul va fi aliniat la linia de bază a textului. Această linie este situată chiar deasupra marginii de jos a blocului, deoarece există un stoc obligatoriu pentru text, un loc pentru "cozi" de litere.

adresare

Pentru a corecta acest defect minor, trebuie doar să atribuiți imaginii proprietățile elementului bloc. Cu aceasta, proprietatea afișajului ne va ajuta. prescrie afișarea imaginii: bloc; și să scape de problemele inutile. De asemenea, puteți conecta alinierea verticală prin proprietatea vertical-align. Acest lucru ajută, de asemenea, pentru a scăpa de indentare nedorite.

În ce browsere funcționează?







Articole similare

Trimiteți-le prietenilor: