Użycie właściwości margin w CSS daje pełną kontrolę nad wielkością przestrzeni wokół elementu HTML. Można jej użyć, aby uczynić element bardziej zwartym lub usunąć niepotrzebną przestrzeń pionową. Margines może być zastosowany do elementu inline lub blokowego i może być określony na kilka sposobów. Może być ustawiony jako procent całkowitej szerokości elementu lub jako stała długość. Wartość może być ujemna, co spowoduje odciągnięcie innych elementów od elementu, lub dodatnia, co spowoduje przesunięcie ich w kierunku elementu. Może być również użyta do ustawienia odległości pomiędzy dwoma blokami.
Pierwsza wartość jest stosowana do góry elementu, a druga do lewej i prawej strony. Trzecia wartość jest stosowana do dolnej części elementu. Czwarta wartość jest stosowana do lewej strony elementu. Wartości te są stosowane w kolejności i nie można ich użyć do utworzenia przeciwnych marginesów. Wartość ujemna przybliża element do jego sąsiadów, natomiast wartość dodatnia odsuwa go od nich. Marginesy pierwszego i ostatniego elementu potomnego zapadają się przez element nadrzędny.
Zwijanie marginesów to cecha, która dotyczy wszystkich elementów. Jest ona szczególnie przydatna w układach graficznych. Zapobiega tworzeniu niepożądanej przestrzeni marginesów pionowych i zapewnia spójne marginesy uniwersalne. Ta cecha jest stosowana do wszystkich typów wyświetlania tabeli oraz do znacznika ::first-line. Jeśli znacznik ::first-line jest ustawiony na margines zwijany, to górny i dolny margines elementów w elemencie ::first-line zwinie się razem, a pozostała przestrzeń zostanie podzielona równo pomiędzy lewy i prawy margines elementu ::first-line.
Jeżeli do kontroli marginesów elementu HTML używany jest arkusz stylów, może on być osadzony w dokumencie HTML lub zastosowany do znacznika body>. W poniższym przykładzie znacznik body> jest ustawiony na właściwość margin-top, a element h2 ma górny i dolny margines 20 pikseli. Margines dolny jest stosowany do elementu div, a margines górny do elementu p>.
Właściwość margin jest dostępna dla wszystkich znaczników HTML, w tym p> i li>. Jeśli element nie posiada marginesu, to ma margines zerowy. Tak jednak nie jest w przypadku większości elementów HTML. Wiele z nich posiada wartość obramowania, która jest ustawiona domyślnie na 0. Obramowanie jest zazwyczaj używane do zawijania się wokół elementu i można je dostosować, aby zmienić jego kolor lub grubość.
Stosując margines, należy pamiętać o użyciu odpowiedniego stylu, aby zapewnić, że marginesy są dziedziczone przez wszelkie elementy potomne. Dodanie marginesu może być szybkim sposobem na zmniejszenie tłoku na stronie. Ponadto, jeśli masz dużą ilość tekstu do wyświetlenia, możesz użyć marginesu, aby go wyśrodkować. Możliwe jest również dodanie obramowania do elementu i natychmiastowe owinięcie go wokół niego.
Podobne tematy