Najczęściej, aby określić wielkość wcięć na stronach HTML, używane są możliwości języka CSS (Cascading Style Sheets). Chociaż w samym języku HTML istnieje kilka "podstawowych" pozostałości, pozwalających w niektórych przypadkach na ustawienie wcięcia. Poniżej znajdują się opcje, które są używane najczęściej, ale poza nimi jest jeszcze sporo różnego rodzaju trików, które pozwalają ustawić wcięcia dla niestandardowych znaczników dokumentów HTML.
Czy to jest to konieczne
Podstawowa znajomość języków HTML i CSS
Instrukcje
Krok 1
Określ element strony, z którego ma zostać wykonane wcięcie. Na przykład, jeśli tekst jest umieszczony wewnątrz znacznika … (blok), to ten blok będzie elementem nadrzędnym dla tego tekstu i wcięcie powinno być liczone od granic bloku. A jeśli tekst (lub obraz) nie znajduje się wewnątrz żadnego bloku (div, li itp.) ani elementu wbudowanego (span, p itp.), to jego elementem nadrzędnym będzie treść dokumentu (znacznik body). Zdefiniowanie elementu nadrzędnego dla tekstu jest konieczne, ponieważ to on musi ustawić opisy stylów tworzących wcięcia. Załóżmy, że Twój tekst jest umieszczony w bloku div: Przykładowy tekst
Krok 2
Użyj właściwości margin języka CSS, aby ustawić marginesy, czyli odległość od granic elementu do sąsiednich elementów, a także do granic elementu nadrzędnego. Odległość tę można ustawić osobno dla dopełnienia z każdej strony: margines-góra - u góry, margines-prawy - z prawej, margines-dolny - u dołu, margines lewy - z lewej. W powyższym przykładzie ten kod css może wyglądać tak: div {
margines górny: 10px;
margines prawy: 15px;
margines-dolny: 40px;
margines lewy: 70px;
} Tutaj "div" jest selektorem, który określa, że ten styl powinien być zastosowany do wszystkich div w kodzie dokumentu. Składnia CSS pozwala na połączenie wszystkich czterech linii w jeden: div {
margines: 10px 15px 40px 70px;
} Wartości wcięć należy zawsze podawać w następującej kolejności: najpierw u góry, potem z prawej, u dołu i z lewej strony. Jeżeli wcięcia są takie same ze wszystkich stron, wystarczy podać wartość raz: div {
margines: 70px;
} Dodatkowo można ustawić pływający margines poziomy (czyli lewy i prawy). Może to być bardzo przydatne, gdy trzeba ustawić blok o danej szerokości dokładnie na środku okna przeglądarki. Sama przeglądarka automatycznie określa, jak duże powinno być wcięcie po obu stronach, jeśli napiszesz następującą instrukcję CSS: div {
margines: 0 auto;
}
Krok 3
Użyj właściwości padding, aby ustawić padding, czyli odległość od obramowania elementu do wszelkich elementów umieszczonych wewnątrz niego, w tym tekstu. Składnia tej właściwości jest dokładnie taka sama jak dla właściwości margin: div {
wyściółka: 10px;
dopełnienie-prawo: 15px;
dopełnienie-dolne: 40px;
dopełnienie lewe: 70px;
} Lub div {
padding: 10px 15px 40px 70px;
}
Krok 4
Użyj właściwości text-indent, aby ustawić dodatkowe wcięcie dla pierwszego wiersza każdego akapitu tekstu. Na przykład: div {
wcięcie tekstu: 80px;
}
Krok 5
Użyj atrybutów hspace i vspace znacznika HTML img, aby ustawić odpowiednio poziome i pionowe wcięcie od obrazu do elementów zewnętrznych. Na przykład tak:
Krok 6
Użyj atrybutu cellpadding znacznika table, jeśli chcesz ustawić wcięcie od krawędzi komórek w tabeli do ich zawartości. A atrybut cellpacing określa odstępy między komórkami tabeli. Na przykład:
| 1 | 2 |
