To tutorial będzie dotyczyć dwóch rzeczy: zewnętrznych marginesów i zewnętrznych obramowań.
Zacznijmy od zewnętrznych marginesów. Dla elementu p, który jest zdefiniowany bezpośrednio wewnątrz elementu body, podanie odległości lewego i prawego marginesu odnosi się do odległości od zewnętrznych granic elementu body. Jeśli kilka akapitów jest ustawionych jeden pod drugim, podanie odległości zewnętrznej obramowania góra i dół odnosi się do odległości między poszczególnymi akapitami.
W przypadku definiowania zewnętrznych marginesów i obramowań istnieje możliwość podania wartości ujemnych, co pozwala na nakładanie się elementów.
Ustalanie odległości zewnętrznej
Margines zewnętrzny i odległość to wymuszona przestrzeń pomiędzy bieżącym elementem a jego rodzicem lub sąsiednim elementem. Rozsądne jest stosowanie następujących właściwości CSS w elementach HTML, które tworzą własny akapit lub blok.
W przypadku właściwości margin jest to skrócona forma czterech właściwości margin-top, margin-right, margin-bottom i margin-left. Dostępne są następujące wartości:
• auto – margines zewnętrzny jest obliczany automatycznie.
• Procentowo – odnosi się do elementu, dla którego zdefiniowano margines.
• Wyrażenie długości – dozwolone są także wartości ujemne. Pozwala to na nakładanie się elementów.
Dozwolone są aż cztery wartości:
• jedna wartość – margines zewnętrzny góra, dół, lewo i prawo
• dwie wartości – pierwsza wartość dla marginesu zewnętrznego góra i dół, druga wartość dla marginesu zewnętrznego prawo i lewo
• trzy wartości – pierwsza wartość dla marginesu zewnętrznego góra, druga wartość dla marginesu zewnętrznego lewo i prawo, trzecia wartość dla marginesu zewnętrznego dołu
• cztery wartości – pierwsza wartość dla marginesu zewnętrznego góra, druga dla prawej, trzecia dla dołu i czwarta dla lewej.
Poniższy przykład przedstawia użycie ogólnych właściwości margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Budowanie riga kamery</p>
<p class="ex">W niniejszym szkoleniu wideo dowiesz się, jak stworzyć rig kamery i poruszać się bezpiecznie przez przestrzeń 3D. Pliki projektu dołączone są w załączniku.</p>
</body>
</html>
W tym przykładzie zdefiniowano dwa akapity tekstu.
Drugiemu akapitowi przypisano także marginesy.
margin: 30px 50px 30px 50px;
To oznacza następujące rzeczy:
• odstęp 30 pikseli od góry
• odstęp 50 pikseli z prawej
• odstęp 30 pikseli z dołu
• odstęp 50 pikseli z lewej
Indywidualne specyfikacje dla marginesów
Poprzednio zostało zaprezentowane ogólne podanie margin. Możecie jednak dokonywać także indywidualnych podań. Poprzez następujące właściwości można określić odstęp góra, lewo, dół lub prawo dla poszczególnych marginesów elementu.
• margin-top – margines zewnętrzny/odstęp góra
• margin-right – margines zewnętrzny/odstęp prawo
• margin-bottom – margines zewnętrzny/odstęp dół
• margin-left – margines zewnętrzny/odstęp lewo
Dla wszystkich czterech właściwości mogą zostać użyte następujące wartości:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Budowanie riga kamery</p>
<p class="ex">W niniejszym szkoleniu wideo dowiesz się, jak stworzyć rig kamery i poruszać się bezpiecznie przez przestrzeń 3D. Pliki projektu dołączone są w załączniku.</p>
</body>
</html>
W przeglądarce widok będzie wyglądał następująco:
Ustalanie odstępu wewnętrznego
Odstęp wewnętrzny to wymuszona przestrzeń pomiędzy zawartością elementu a jego własnym obramowaniem. Rozsądne jest stosowanie następujących właściwości CSS w elementach HTML, które tworzą własny akapit lub blok.
Dla właściwości padding jest to skrócona forma czterech właściwości padding-top, padding-right, padding-bottom i padding-left. Za pomocą nich można określić szerokość między ramką a zawartością elementu, czyli odległość wewnętrzną.
• Procentowo – odnosi się do elementu nadrzędnego.
• Wyrażenie długości
Dla każdej z nich można podać aż cztery wartości:
• jedna wartość – odstęp wewnętrzny góra, dół, lewo i prawo
• dwie wartości – pierwsza wartość dla odstępu wewnętrznego góra i dół, druga wartość dla odstępu wewnętrznego prawo i lewo
• trzy wartości – pierwsza wartość dla odstępu wewnętrznego góra, druga wartość dla odstępu wewnętrznego lewo i prawo, trzecia wartość dla odstępu wewnętrznego dołu
• cztery wartości – pierwsza wartość dla odstępu wewnętrznego góra, druga dla prawej, trzecia dla dolnego i czwarta dla lewej.
Przykładowe użycie:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Konfiguracja kamery-Riga</p>
<p class="ex">W tym szkoleniu wideo dowiesz się, jak skonfigurować rig kamery i jak bezpiecznie poruszać nim się w przestrzeni 3D. Został załączony plik projektu.</p>
</body>
</html>I tutaj rezultat w przeglądarce:
Przy użyciu czterech właściwości padding można definiować odstępy wewnętrzne. Do dyspozycji są następujące cztery właściwości CSS:
• padding-top – odległość między górnym brzegiem zawartości a górnym brzegiem
• padding-bottom – odległość między dolnym brzegiem zawartości a dolnym brzegiem
• padding-left – odległość między lewym brzegiem zawartości a lewym brzegiem
• padding-right – odległość między prawym brzegiem zawartości a prawym brzegiem.
Dla każdej z tych czterech właściwości można używać następujących wartości:
• procent – odnosi się do elementu nadrzędnego
• wartość długości
