Tworzenie miejsc i fizyczna separacja elementów w HTML może być trudne do zrozumienia dla początkującego projektanta stron internetowych. Wynika to z faktu, że HTML ma właściwość zwaną "białą spaczoną przestrzenią". Niezależnie od tego, czy w kodzie HTML wpiszesz 1 spację, czy 100, przeglądarka automatycznie zwinie te spacje do zaledwie jednego miejsca. Różni się to od programu takiego jak Microsoft Word, który umożliwia twórcom dokumentów dodawanie wielu spacji w celu oddzielenia słów od innych elementów tego dokumentu. Nie jest tak, jak działa odstępy w projektowaniu witryn.
Jak więc dodać białe spacje w kodzie HTML, które pojawiają się na stronie internetowej? W tym artykule omówiono niektóre z różnych sposobów.
Spaces w HTML z CSS
Preferowany sposób dodawania spacji w kodzie HTML to Cascading Style Sheets (CSS). CSS powinien być używany do dodawania wszelkich wizualnych aspektów strony internetowej, a ponieważ odstępy są częścią wizualnej charakterystyki strony, CSS to miejsce, w którym chcesz to zrobić.
W CSS możesz użyć właściwości marginesu lub wypełnienia, aby dodać przestrzeń wokół elementów. Dodatkowo właściwość tekst-wcięcie dodaje spację do przodu tekstu, na przykład do wcięć akapitów.
Oto przykład użycia CSS do dodania przestrzeni przed wszystkimi akapitami. Dodaj następujący kod CSS do zewnętrznego lub wewnętrznego arkusza stylów:
p {tekst-wcięcie: 3em;} Jeśli chcesz dodać do tekstu dodatkowe miejsce lub dwa, możesz użyć spacji nie łamającej się. Ta postać działa tak, jak standardowa postać spacji, tylko że nie zwija się w przeglądarce. Oto przykład dodawania pięciu spacji do linii tekstu: Ten tekst ma w sobie pięć dodatkowych spacji Używa HTML: Ten tekst ma w sobie pięć dodatkowych spacji Możesz także użyć To zdanie ma pięć linii podziału na końcu Podczas gdy te opcje działają zarówno - niepodzielony element spacji rzeczywiście doda odstępy do tekstu, a podziały linii dodadzą odstępy pod akapitem pokazanym powyżej - nie jest to najlepszy sposób na utworzenie odstępów na stronie. Dodanie tych elementów do kodu HTML dodaje do kodu informację wizualną, zamiast oddzielać strukturę strony (HTML) od stylów wizualnych (CSS). Zgodnie z najlepszymi praktykami powinny one być oddzielne z wielu powodów, w tym łatwości aktualizacji w przyszłości oraz ogólnego rozmiaru pliku i wydajności strony. Jeśli używasz zewnętrznego arkusza stylów do dyktowania wszystkich stylów i odstępów, to zmiana stylu dla całej witryny jest łatwa, ponieważ wystarczy zaktualizować ten jeden arkusz stylów. Rozważmy powyższy przykład zdania z pięcioma Zamiast dodawać te elementy odstępów do kodu, użyj CSS. p {padding-bottom: 20 pikseli;} Ta jedna linia CSS dodawałaby odstępy pod akapitami twojej strony. Jeśli chcesz zmienić ten odstęp w przyszłości, edytuj tę jedną linię (zamiast całego kodu witryny) i możesz już iść! Teraz, jeśli chcesz dodać pojedyncze miejsce w jednej części witryny, użyj Spaces w HTML: Inside Your Text
tag, aby dodać dodatkowe podziały wierszy.
Dlaczego rozstawianie w HTML to zły pomysł
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. Jest to spora ilość dodatkowego znacznika, który rozleje twoje strony. Dodatkowo, jeśli zdecydujesz, że ta odległość jest zbyt duża lub zbyt mała i chcesz ją nieco zmienić, musisz edytować każdy akapit w całej witrynie. Nie, dziękuję!
tag lub pojedyncza nie łamająca się przestrzeń to nie koniec świata, ale musisz być ostrożny. Korzystanie z tych wbudowanych opcji odstępów w HTML może być śliskie. Podczas gdy jeden lub dwa nie zaszkodzą twojej witrynie, jeśli będziesz kontynuować tę ścieżkę, wprowadzisz problemy na swoich stronach. Na koniec lepiej zajmiesz się CSS-em dla odstępów HTML i wszystkimi innymi wizualnymi potrzebami strony.
