Hur man ritar en vertikal linje för att skilja HTML-text från bild

HTML erbjuder inte lika rent en lösning för vertikala linjer som för horisontella linjer - en vertikal som motsvarar


taggen existerar inte. Om du vill ställa in din företags webbsida så att det finns en ren avgränsning mellan text och en bild kan du använda CSS för att skapa en enkel gräns. Gränsen kan gå runt hela bilden, eller du kan visa en kant på bara en sida. Du kan också använda CSS för att flyta bilder, skapa inslagen text.

1.

Ställ in din bild i din text och lägg till en "stil" attributtagg. HTML-koden för din bild kan till exempel se ut så här:

2.

Definiera gränsen i attributet "stil". Om du till exempel vill att en gräns ska tillämpas på hela bilden, ser CSS ut så här:

Detta är en stenhalsgränsinställning - det första värdet anger gränsen, den andra definierar gränssnittet och den tredje sätter färgen. Borders kan vara fast, prickad, streckad eller dubbel; eller du kan ange en 3-D-gräns, såsom spår, ås, ingång eller början.

Om du vill tillämpa gränsen till en sida för att skapa en sann vertikal linje, skulle du använda "gräns vänster" eller "gräns-höger" istället för "gräns".

3.

Lägg till vaddering för att skapa lite utrymme mellan din bild och text. Om du vill att gränsen ska vara 5 pixlar bort från bilden, lägg till "vaddering: 5px;" till din stil tagg. Du kan ange vaddering på bara en sida genom att till exempel använda "padding-left: 5px;". Om du vill skapa utrymme mellan gränsen och texten, använd en marginal. Du måste också ange din bildadress för "src" -taggen. När du sammanfattar det kan din kod se ut så här:

4.

Spara och testa din HTML för att bekräfta att gränsen visas som du tänker.

Populära Inlägg