Zacznijmy od kontenera
Aby zrozumieć padding i margin konieczny jest krótki wstęp na temat kontenerów. Wszystkie elementy strony internetowej są ułożone w kontenerach. Można powiedzieć, że to takie pudełka, które mogą w sobie mieć kolejne pudełka (kontenery), a w każdym pudełku mogą być widżety strony, takie, jak tekst, zdjęcia, wideo i inne. Wszystkie powyższe składniki (zarówno kontenery, jak i widżety) mogą mieć zdefiniowane padding i margin.
Co to jest margin (margines) w Elementorze i CSS?
Margines to przestrzeń na zewnątrz danego elementu strony, która oddziela ten element od innych części strony. Poniżej prezentuję poglądową grafikę, na której jest czarny kontener, a w nim żółty kontener. Margines jest zaznaczony dla żółtego kontenera, bo jest na zewnątrz tego właśnie kontenera.
W samym Elementorze znajdziesz te ustawienia, gdy po lewej stronie na górze klikniesz zakładkę zaawansowane. Możesz ustalić inną wartość dla górnego marginesu, prawego marginesu, dolnego marginesu, lewego marginesu. Aby to zrobić musisz odkliknąć spinacz z prawej strony. Domyślnie zmiana jest ustawiona na taką samą wartość dla każdego marginesu.
Margines w CSS
Jeżeli nie korzystasz z Elementora i tworzysz stronę w HTMLu lub innym narzędziu, wszystko działa analogicznie. Różnica polega na tym, że w CSS wszystko opisujesz za pomocą słów.
margin: wartość; – ustawienie marginesu dla wszystkich stron
margin-top: wartość;
margin-right: wartość;
margin-bottom: wartość;
margin-left: wartość;
margin: góra prawo dół lewo;
Dla przykładu: margin-left: 20px albo margin: 20px 40px 20px 40px
Co to jest padding (dopełnienie) w Elementorze i CSS?
Padding to wewnętrzna przestrzeń elementu oddzielająca ten właśnie element od innych, będących w środku. Aby zobrazować to zjawisko mogę się posłużyć dokładnie tę samą grafiką, co wyżej. Tym razem będziemy spoglądać na czarny kontener, dla którego ustalamy dopełnienie. Żółty element jest w środku, więc ustawiając dopełnienie w czarnym kontenerze, sprawiamy że żółty kontener się „kurczy” o oustaloną wartość odległości. W Elementorze te ustawienia znajdziemy poniżej ustawień marginesu.
Dopełnienie w CSS
Jeśli chcesz skorzystać z CSS, to zamierzony efekt osiągniesz stosując następujące polecenia:
padding: wartość; – ustawienie paddingu dla wszystkich stron.
padding-top: wartość;
padding-right: wartość;
padding-bottom: wartość;
padding-left: wartość;
padding: góra prawo dół lewo;
Dla przykładu padding-right: 20px albo padding: 20px 10px 20px 10px
Wartości – px, %, rem, em
Każda wartość może być definiowana w innych jednostkach. Nie ma tutaj jednej ustalonej zasady. Na jednej stronie mogą być wykorzystywane różne jednostki miary. Jest to zależne od designu strony i ogólnego zapotrzebowania. Dla osób początkujących, zalecałbym jednak pozostanie przy pikselach i procentach. Piksele głównie dla fontów a procenty do ustalania szerokości kontenerów. Oto krótki opis każdej z możliwych do wykorzystania jednostek.
Piksele (px)
Jednostka absolutna, reprezentująca jeden piksel na ekranie. Jest to najbardziej bezpośrednia i powszechnie używana jednostka.
Procenty (%)
Jednostka relatywna, określająca rozmiar elementu w stosunku do rozmiaru jego rodzica (elementu nadrzędnego).
Em
Jednostka relatywna, zależna od rozmiaru czcionki rodzica elementu. Jeśli rozmiar czcionki rodzica to 16px, to 1em = 16px.
Rem
Jednostka relatywna, ale w przeciwieństwie do em, odnosi się do rozmiaru czcionki elementu głównego (root), czyli elementu <html>. Jest to bardziej przewidywalne niż em, ponieważ nie zależy od zagnieżdżenia elementów.
Najlepsze praktyki użycia padding i margin
- Spójność: Stosuj jednolite odstępy na całej stronie, aby zachować harmonię.
- Przestrzeń Biała: Używaj paddingu i marginu do tworzenia „oddechu” i poprawy czytelności.
- Responsywność: Dostosuj padding i margin do różnych rozmiarów ekranów, aby strona wyglądała dobrze na każdym urządzeniu.
- Unikanie Nadmiernego Użycia: Stosuj padding i margin z umiarem, aby uniknąć chaotycznego wyglądu.
Wnioski końcowe
W opanowaniu paddingu i marginu tkwi klucz do tworzenia estetycznych i funkcjonalnych stron internetowych, zarówno w czystym CSS, jak i w Elementorze. Pamiętając o omówionych zasadach, z pewnością podniesiesz swoje umiejętności projektowania i zbudujesz strony, które zachwycą użytkowników.
