Een verticale lijn tekenen naar afzonderlijke HTML-tekst van afbeelding

HTML biedt niet zo een zuivere oplossing voor verticale lijnen als voor horizontale lijnen - een verticale equivalent van de

1.

Zet je afbeelding op in je tekst en voeg een attribuut tag "stijl" toe. De HTML-code voor uw afbeelding ziet er bijvoorbeeld ongeveer zo uit:

2.

Definieer de rand binnen het kenmerk "stijl". Als u bijvoorbeeld een rand wilt toepassen op de gehele afbeelding, ziet de CSS er als volgt uit:

Dit is een afkorting-randinstelling - de eerste waarde stelt de breedte van de rand in, de tweede definieert het type rand en de derde stelt de kleur in. Grenzen kunnen vast, gestippeld, onderbroken of dubbel zijn; of u kunt een 3D-rand opgeven, zoals groef, rug, inzet of begin.

Als u de rand slechts aan één kant wilt toepassen om een ​​echte verticale lijn te maken, gebruikt u 'border-left' of 'border-right' in plaats van 'border'.

3.

Voeg opvulling toe om wat ruimte tussen uw afbeelding en tekst te creëren. Als je wilt dat de rand 5 pixels verwijderd is van de afbeelding, voeg je "opvulling: 5px;" toe naar je stijltag. U kunt padding aan één kant opgeven door bijvoorbeeld 'padding-left: 5px;' te gebruiken. Als u ruimte wilt creëren tussen de rand en de tekst, gebruikt u een marge. U moet ook uw afbeeldings-URL opgeven voor de tag "src". Als je alles bij elkaar optilt, kan je code er ongeveer zo uitzien:

4.

Sla uw HTML op en test deze om te bevestigen dat de rand wordt weergegeven zoals u van plan bent.