Jak narysować pionową linię w celu oddzielenia tekstu HTML od obrazu

HTML nie oferuje tak czystego rozwiązania dla linii pionowych, jak dla linii poziomych - pionowego odpowiednika dla

Tag nie istnieje. Jeśli chcesz skonfigurować stronę internetową firmy tak, aby było czyste rozróżnienie między tekstem a obrazem, możesz użyć CSS do utworzenia prostego obramowania. Obramowanie może obejść cały obraz lub można wyświetlić obramowanie tylko z jednej strony. Możesz również użyć CSS do unoszenia obrazów, tworząc zawijany tekst.

Ustaw obraz w tekście i dodaj znacznik atrybutu "styl". Na przykład kod HTML obrazu może wyglądać mniej więcej tak:

Zdefiniuj granicę w atrybucie "styl". Na przykład, jeśli chcesz zastosować obramowanie do całego obrazu, CSS będzie wyglądać tak:

To jest skrótowe ustawienie obramowania - pierwsza wartość określa szerokość obramowania, druga określa rodzaj obramowania, a trzecia ustawia kolor. Granice mogą być stałe, kropkowane, przerywane lub podwójne; lub możesz określić granicę trójwymiarową, taką jak rowek, grzbiet, wstawka lub początek.

Jeśli chcesz zastosować obramowanie tylko do jednej strony, aby utworzyć prawdziwą pionową linię, użyj "obramowania po lewej" lub "obramowania po prawej" zamiast "obramowania".

Dodaj dopełnienie, aby utworzyć trochę miejsca między obrazem a tekstem. Jeśli chcesz, aby ramka znajdowała się 5 pikseli od obrazu, dodaj "dopełnienie: 5 pikseli"; do Twojego tagu stylu. Możesz określić dopełnienie tylko z jednej strony, używając na przykład "padding-left: 5px;". Jeśli chcesz utworzyć spację między obramowaniem a tekstem, użyj marginesu. Konieczne będzie również określenie adresu URL obrazu dla znacznika "src". Kiedy umieścisz to wszystko razem, Twój kod może wyglądać mniej więcej tak: