Sposób, w jaki przeglądarki radziły sobie z białymi znakami, na początku nie jest zbyt intuicyjny, zwłaszcza jeśli porównasz sposób, w jaki Hypertext Markup Language obsługuje białe znaki w porównaniu z programami do edycji tekstu. W oprogramowaniu do edycji tekstu możesz dodać wiele odstępów lub tabulatorów w dokumencie, a odstępy te zostaną odzwierciedlone w wyświetlanej treści dokumentu. Ten projekt WYSIWYG nie dotyczy HTML ani stron internetowych.
Odstępy w druku
W oprogramowaniu do przetwarzania tekstu trzy główne białe znaki to przestrzeń, patka, i powrót karetki. Każdy z tych znaków działa w inny sposób, ale w HTML przeglądarki renderują je wszystkie zasadniczo tak samo. Niezależnie od tego, czy umieścisz jedno miejsce, czy 100 miejsc w swoim Znaczniki HTML lub wymieszaj odstępy z tabulatorami i znakami powrotu karetki, wszystkie te elementy zostaną skondensowane do jednej spacji, gdy strona jest renderowana przez przeglądarka. W terminologii projektowania stron internetowych jest to znane jako
załamanie się odstępu. Nie możesz użyć tych typowych klawiszy odstępów, aby dodać spacje na stronie internetowej, ponieważ przeglądarka zwija powtarzające się spacje tylko w jedną spację podczas renderowania w przeglądarce,Używanie CSS do tworzenia zakładek HTML i odstępów
Dzisiejsze strony internetowe są budowane z oddzieleniem struktury i stylu. Struktura strony jest obsługiwana przez HTML, podczas gdy styl jest dyktowany przez Kaskadowe Arkusze Stylów. Aby utworzyć odstępy lub osiągnąć określony układ, przejdź do CSS zamiast dodawać znaki odstępów do kodu HTML.
Jeśli próbujesz użyć zakładki aby utworzyć kolumny tekstu, zamiast tego użyj
Jeśli dane, które przedstawiasz, są danymi tabelarycznymi, użyj tabel, aby wyrównać te dane w dowolny sposób. Tabele często otrzymują złą reputację w projektowaniu stron internetowych, ponieważ przez wiele lat były używane jako czyste narzędzia do tworzenia układów, ale tabele są nadal całkowicie poprawne, jeśli treść zawiera rzeczywiście dane tabelaryczne.
Marginesy, dopełnienie i wcięcie tekstu
Najczęstszymi sposobami tworzenia odstępów za pomocą CSS jest użycie jednego z następujących stylów CSS:
- margines
- wyściółka
- wcięcie tekstu
Na przykład wcięcie pierwszego wiersza akapitu jak tabulatora za pomocą następującego kodu CSS (zwróć uwagę, że zakłada to, że akapit ma dołączony atrybut klasy „first”):
p.pierwszy {
wcięcie tekstu: 5em;
}
W tym akapicie wcięcie około pięciu znaków.
Użyj właściwości marginesu lub dopełnienia w CSS aby dodać odstępy u góry, u dołu, z lewej lub prawej strony (lub kombinacji tych boków) elementu. Uzyskaj dowolny rodzaj odstępów, zwracając się do CSS.
Przenoszenie tekstu o więcej niż jedną spację bez CSS
Jeśli chcesz tylko, aby tekst został przesunięty o więcej niż jedną spację od poprzedniego elementu, użyj spacji nierozdzielającej.
Aby użyć niełamliwej spacji, dodajesz tyle razy, ile potrzebujesz w znacznikach HTML.
HTML uwzględnia te nierozdzielające spacje i nie zwija ich do pojedynczej spacji. Jednak takie podejście jest uważane za kiepską praktykę, ponieważ dodaje dodatkowe znaczniki HTML do dokumentu tylko w celu spełnienia wymagań dotyczących układu. Jeśli to możliwe, unikaj dodawania niełamliwych przestrzeni, aby osiągnąć pożądany efekt układu i użytkowania Marginesy CSS i dopełnienie zamiast.