Utwórz białe znaki HTML

Twórz spacje i fizyczną separację elementów w HTML za pomocą CSS

Tworzenie spacji i fizyczne oddzielanie elementów w HTML może być trudne do zrozumienia dla początkującego projektanta stron internetowych. To dlatego, że HTML ma właściwość znaną jako „upadek białych znaków”. bez względu na to, czy wpiszesz 1 spację, czy 100 w kodzie HTML, przeglądarka internetowa automatycznie zwinie te spacje do jednej spacji. To różni się od programu takiego jak Microsoft Word , który umożliwia twórcom dokumentów dodawanie wielu spacji do oddzielania słów i innych elementów tego dokumentu. Nie tak działa odstępy między projektami stron internetowych.

Jak więc dodać spacje w HTML, które pojawiają się na strona internetowa, którą zbudowałeś ? W tym artykule omówiono niektóre z różnych sposobów.

RapidEye / Getty Images

Spacje w HTML z CSS

Preferowanym sposobem dodawania spacji w kodzie HTML jest użycie Kaskadowe arkusze stylów (CSS) . CSS powinien być używany do dodawania wszelkich wizualnych aspektów strony internetowej, a ponieważ odstępy są częścią wizualnych cech projektu strony, CSS jest tam, gdzie chcesz to zrobić.

W CSS możesz użyć właściwości marginesu lub dopełnienia, aby dodać przestrzeń wokół elementów. Ponadto właściwość text-indent dodaje miejsce na początku tekstu, na przykład na wcięcie akapitów.

Oto przykład, jak użyć CSS, aby dodać spację przed wszystkimi akapitami. Dodaj następujący kod CSS do swojego zewnętrzny lub wewnętrzny arkusz stylów:

|_+_|

Spacje w HTML wewnątrz Twojego tekstu

Jeśli chcesz dodać do tekstu dodatkową spację lub dwie, możesz użyć spacji nierozdzielającej. Ten znak zachowuje się jak standardowy znak spacji, tyle że nie zwija się w przeglądarce.

Oto przykład, jak dodać pięć spacji w wierszu tekstu:

|_+_|

Używa kodu HTML:

|_+_|

Możesz także użyć
tag, aby dodać dodatkowe podziały wiersza.

|_+_|

Dlaczego odstępy w HTML to zły pomysł

Chociaż obie te opcje działają – element nierozdzielający spacji rzeczywiście doda odstępy do tekstu, a podziały wierszy dodadzą odstępy pod akapitem pokazanym powyżej – nie jest to najlepszy sposób na tworzenie odstępów na stronie internetowej. Dodanie tych elementów do kodu HTML dodaje informacje wizualne do kodu zamiast oddzielać strukturę strony (HTML) od stylów wizualnych (CSS). Najlepsze praktyki wskazują, że powinny one być oddzielne z wielu powodów, w tym łatwości aktualizacji w przyszłości oraz ogólnego rozmiaru pliku i wydajność strony .

Jeśli używasz zewnętrznego arkusza stylów do dyktowania wszystkich stylów i odstępów, zmiana tych stylów dla całej witryny jest łatwa, ponieważ wystarczy zaktualizować ten jeden arkusz stylów.

Rozważ powyższy przykład zdania z piątką
tagi na końcu. Jeśli chcesz mieć taką ilość odstępów na dole każdego akapitu, musisz dodać ten kod HTML do każdego akapitu w całej witrynie. To spora ilość dodatkowych znaczników, które zwiększą twoje strony. Dodatkowo, jeśli zdecydujesz, że ten odstęp jest za duży lub za mały i chcesz go nieco zmienić, będziesz musiał edytować każdy akapit w całej witrynie. Nie, dziękuję!

Zamiast dodawać te elementy odstępów do kodu, użyj CSS.

|_+_|

Ta jedna linia CSS dodałaby odstępy pod akapitami Twojej strony. Jeśli chciałbyś zmienić te odstępy w przyszłości, edytuj tę jedną linię (zamiast całego kodu witryny) i gotowe!

Teraz, jeśli potrzebujesz dodać pojedynczą spację w jednej części swojej witryny, używając
tag lub pojedyncza niełamliwa spacja to nie koniec świata, ale trzeba być ostrożnym. Korzystanie z tych wbudowanych opcji odstępów HTML może być śliskim nachyleniem. Chociaż jeden lub dwa mogą nie zaszkodzić Twojej witrynie, jeśli będziesz podążać tą ścieżką, wprowadzisz problemy na swoich stronach. W końcu lepiej zwrócisz się do CSS dla odstępów HTML i wszystkich innych potrzeb wizualnych na stronie internetowej.​