Cum să înconjurați textul în jurul unei imagini folosind HTML sau CSS

Atunci când includeți o imagine pe o pagină web, stilul implicit o afișează de obicei deasupra sau dedesubtul conținutului text, lăsând spațiu alb pe laturi. Acest lucru ocupă loc inutil și face ca imaginea să pară separată de text. Pentru a corecta acest aspect, puteți utiliza HTML sau CSS pentru a specifica poziționarea imaginii astfel încât textul să se încline în jurul marginii.

Utilizarea HTML

Pasul 1

Deschideți fișierul paginii în editorul de text și plasați cursorul în interiorul etichetei <img>. Adăugați atributul align="..." după cum urmează:

Pasul 2

Alegeți una dintre valorile left, right, top, bottom sau middle pentru a indica poziția imaginii față de text:

• left – imaginea se aliniază la stânga, iar textul curge la dreapta.
• right – imaginea se aliniază la dreapta, iar textul curge la stânga.
• top – imaginea este plasată deasupra textului.
• bottom – imaginea este plasată sub text.
• middle – imaginea este centrată vertical.

Salvați fișierul.

Utilizarea CSS

Pasul 1

În interiorul etichetei <img>, adăugați atributul style="...":

Pasul 2

Folosiți proprietatea float pentru a stabili orientarea:

• float:left; – imaginea apare pe stânga, iar textul se aliniează la dreapta.
• float:right; – imaginea apare pe dreapta, iar textul se aliniează la stânga.

Exemplu: <img src="exemplu.jpg" style="float:left; margin:0 10px 10px 0;" alt="Descriere">

Salvați documentul.

Tipuri de sfaturi suplimentare

1. Adăugați margin pentru a crea spațiu între imagine și text, evitând lipirea lor. 2. Dacă doriți o înclinare mai complexă, luați în considerare shape-outside împreună cu float pentru a obține forme ascuțite.

Concluzie

Indiferent dacă alegeți HTML sau CSS, poți controla cu ușurință modul în care textul se încline în jurul imaginilor, îmbunătățind astfel estetică și lizibilitatea paginii tale.