W niniejszym artykule zostaną opisane trzy znaczniki HTML/CSS odpowiadające za marginesy: margin (określający margines zewnętrzny), padding (określający margines wewnętrzny) oraz text-indent (określający wcięcie akapitu).
Za ustawianie marginesów zewnętrznych odpowiada znacznik html „margin”:
„margin: wartość;” , którym można określić wszystkie cztery wartości (margines prawy <right>, lewy <left>, dolny <bottom> oraz górny <top>).
Następujące rozwiązanie:
.przyklad {
margin: 20px 40px 60px 80px; }
przypisuje wybranemu elementowi div margin-top równy 20 px, margin-right równy 40 px, bottom-margin równy 60 px oraz left-margin równy 80px.
Zauważmy, że przy tego typu określaniu wartości odstępów, kluczowa jest tu kolejność wpisywania kolejnych wartości.
Można to ubrać w następujący wzór:
.przyklad {
margin: top right bottom left; }
Jeśli chcemy określić tylko jeden rodzaj marginesu, możemy użyć jednego z następujących znaczników:
margin-right: wartość;
margin-left: wartość;
margin-top: wartość;
margin-bottom: wartość;
W celu wyśrodkowania elementu blokowego div w oknie przeglądarki można użyć następującego określenia css:
.wrapper{width: 920 px; margin: 0 auto 0 auto;}
gdzie .wrapper to główny div naszej witryny. W tym przypadku .wrapper o szerokości 920 px zostanie wyśrodkowany w oknie przeglądarki, jeśli ustawiona rozdzielczość będzie większa aniżeli szerokość elementu (ustawiona przy atrybucie width, tu: 920 px).
Atrybut margin, podobnie jak opisany po nim atrybut padding, może przyjmować klasyczne wartości typu px, pt, em, czy %, np. margin-left: 5%;.
Struktura atrybutu padding jest analogiczna względem struktury atrybutu margin. Padding, w przeciwieństwie do margin, określa odstępy wewnętrzne (marginesy wewnętrzne), na przykład wewnętrzny margines w divie.
Podobnie jak w przypadku atrybutu „margin”, również „padding” określa się w następujący sposób:
padding: wartość top; wartość right; wartość bottom; wartość left;
Również identycznie jak w przypadku artybutu „margin”, „padding” można określić osobno dla każdej z czterech możliwości:
padding-top: 50px;
padding-bottom: 75px;
padding-right: 50px;
padding-left: 75px;
Tematem, który warto poruszyć przy okazji atrybutów margin oraz padding, jest znacznik text-indent. Wielu niedoświadczonych webmasterów do robienia akapitów w tekście używa twardych spacji.
Jest to rozwiązanie zastępcze (twarda spacja nie została stworzona w celu robienia akapitów) ponadto takie, które zdaje egzamin jedynie w pojedynczych przypadkach. Wyobraźmy sobie sytuację, że ustalamy, że akapity naszych artykułów będą wynosiły np. 6 twardych spacji. Po pierwsze, przy każdym nowym akapicie będziemy musieli kopiować wcięcia, przez co nasz dokument HTML nie będzie wyglądał ładnie i nie będzie przejrzysty a po drugie w przypadku zmiany układu tekstu i chęci zwiększenia lub zmniejszenia akapitów, w każdym przypadku będziemy zmuszeni do ręcznego wdrażania zmian w każdym przypadku.
Zdecydowanie lepszym rozwiązaniem na tworzenie akapitów jest używanie HTMLowego znacznika: text-indent:, jak w poniższym przypadku:
<p style="text-indent:15px;"> Linijka z wcięciem rozmiaru 15px. <br /> Kolejna linijka, już bez akapitu (dalsza część artykułu). </p>
Wartość cechy text-indent może zostać wyrażona w px, xm, pt, em, ex (stosowane być mogą również wartości ujemne), text-indent może również przejmować wartości rodzica „text-indent: inherit;”.
W pliku formacie css rozwiązanie typu text-indent będzie wyglądało następująco:
<style type="text/css">
p {text-indent: 15px;}
h1 {text-indent: 5%px;}
</style>