Najczęściej zadawane pytania

Ustawienia - Padding i Margin

Aby uzyskiwać poziome i pionowe odstępy pomiędzy elementami kolumnami i wierszami, stosuj ustawienia Padding i Margin w zależności czy chcesz dokonywać odstępów wewnętrznych czy zewnętrznych.
Do odsuwania elementów nie stosuj tzw przełamywania linii za pomocą przycisku "ENTER" na klawiaturze, ponieważ może to doprowadzać do nie pożądanych sytuacji na stronie i tworzyć nie potrzebne kolizje, oraz błędy a także jest to nie właściwe rozwiązanie.

Przełamywanie linii swobodnie stosuj we wprowadzanym tekście w celu tworzenia odstępów tekstowych tak jak w każdym innym edytorze tekstowym.

Na poniższym zrzucie ekranu przedstawiono różnicę pomiędzy odstępami dla funkcji Padding i Margin.



Na powyższym zrzucie ekranu, niebieskie pole to zawartość elementu, w tym przykładzie jest to element "Tekst" , jednak równie dobrze może być to element "Zdjęcie" itd.

Fioletowe pole to odsunięcie pola tekstowego od wewnętrznych krawędzi elementu "Tekst" za pomocą funkcji "Padding" przykład przedstawia odsuniecie o 30px w każdym kierunku.

Żółte pole to odsunięcie całego elementu "TEKS" od zewnętrznych krawędzi za pomocą funkcji "Margin", tu również wartość to 30px w każdym kierunku.



Ustawienie - Padding

Padding - Odstęp Wewnętrzny od krawędzi (fioletowy kolor otoczki, przykład 30px odsunięcia w każdym kierunku).



Opis tej funkcji często wymieniany jest w elementach, warto jednak wspomnieć o tym narzędziu szerzej.

Aby wprowadzić tego typu zmiany, przenieść np element "Tekst" na stronę lub edytuj już istniejący, kliknij w przycisk "Padding" (ikona przedstawiona w tytule) wyświetli się menu ustawień.



Na powyższym zrzucie ekranu dla zaprezentowania przykładu ustawiono liczbę 30px we wszystkich kierunkach, możesz jednak dokonać różnych konfiguracji tego ustawienia w zależności od tego jaki efekt chcesz uzyskać przy pomocy funkcji "Padding".

Wartości możesz podawać w skali %, aby to zrobić kliknij w przełącznik przedstawiony na poniższym zrzucie ekranu.



Aby ponownie wrócić do wartości px ponownie kliknij w przełącznik którego przykład jest poniżej.




"Padding" odsuwa zawartość elementu od wewnętrznej krawędzi co widać na powyższym zrzucie ekranu, niebieski kolor to zawartość elementu a fioletowy to obszar odsunięcia zawartości od wewnętrznej krawędzi, odsuwać możesz zawartość w czterech kierunkach, górna, prawa, dolna i lewa krawędź, jest to bardzo przydatne gdy na przykład chcesz uzyskać sytuacje która przedstawiona jest na poniższym obrazku lub zwyczajnie odsunąć jakiś element delikatnie w inne miejsce, ponieważ nie podoba Ci się jego położenie.

Jak widać na powyższym obrazku, cały element zdjęcie jest na białym tle głównego wiersza a za pomocą funkcji Padding która w tym wypadku ustawiona jest na 30px w każdym kierunku, uzyskujemy efekt obramowania co widać po szarej ramce, a w rzeczywistości odsuwa zawartość od w-w krawędzi, ramka z kolei to nic innego jak kolor tła elementu zdjęcie.

Oczywiście ramkę można również utworzyć za pomocą narzędzia "Krawędzie" i jest to zalecane gdyż funkcja padding jest od odsuwania elementów od w-w krawędzi a nie do ich tworzenia obramowań, choć czasem są sytuacje gdzie można skorzystać z tej opcji.
Co tyczy się samych krawędzi są one opisane w kategorii "Ustawienia krawędzi".

Kolejnym przykładem zastosowania funkcji Padding można dzięki niej odsuwać zawartość elementu "Tekst" aby zachować czytelność wyglądu strony.

Przykładowo:

Na powyższym zrzucie ekranu zwróć uwagę że tekst styka się z krawędziami elementu "Tekst" a sam element ma ustawiony kolor tła na szary, jak widać niema tu zastosowanego narzędzia "Padding" co powoduje że tekst styka się z krawędziami. Więcej o ustawieniu tła w kategorii "Ustawienia Tła"

Natomiast na powyższym zrzucie ekranu, zostało zastosowane ustawienie Padding o parametrach 30px na każdą ze stron, co powoduje odsunięcie się tekstu od wszystkich krawędzi elementu.

Aby polepszyć przejrzystość elementu zastosowano także funkcje wypełnienia tła, w tym przypadku szarego koloru na elemencie "Tekst", dobrze się to komponuje z białym głównym tłem na cały wierszu. Staraj się łączyć poszczególne funkcje aby zyskać jeszcze większe efekty wyglądu i czytelności dla Twojej strony.

Zwróć jednak uwagę że może się zdarzyć, kiedy zastosujesz np 5 kolumn w wierszu, to zawartość kolumn może zachowywać się niepożądanie.
Na przykład tekst będzie się zawężał a zdjęcie będzie bardzo małe lub nawet zniknie a element nagle przybędzie na rozmiarze.
Dzieje się tak dlatego że jeśli przykładowo szerokość kolumny wynosi 200px (co bezpośrednio nie jest pokazane w edytorze a jedynie przy pomocy użycia narzędzia inspekcji w przeglądarkach internetowych) a dajmy na to lewa i prawa krawędź Padding będzie ustawiona po 150px to wynik sumując się daje łącznie 300px z ustawienia "Padding", wówczas szerokość elementu wynosić już będzie 500px zamiast 200, co w efekcie będzie rozpychać elementy.

Zazwyczaj odległości na Padding nie powinny przekraczać 30px na każdą z krawędzi, jednak są pewne odstępstwa od tej reguły gdy chcemy na przykład zrobić odstęp pomiędzy wierszami, wówczas ustawia się je nawet na 100px, poniżej przykład.



Aby było łatwiej to zrozumieć to powyższy zrzut ekranu został celowo wykonany w kreatorze.
Zwróć uwagę na zielony plus za pomocą którego tworzy się nowy wiersz, a obecnie jest on swego rodzaju środkiem pomiędzy dwoma wierszami, wiersz u góry z szarym tłem ustawiony jest na "Padding" 100px od dołu, natomiast wiersz poniżej zielonego plusa o białym tle ustawiony jest na "Padding" 100px od góry.
Uzyskujemy dzięki temu różnicę odstępu pomiędzy wierszami i ich zawartościami, co czyni stronę bardziej czytelną.

Staraj się aby zawsze Padding był stosowany równomiernie we wszystkich kolumnach w danym wierszu. jeśli chcesz aby elementy koło siebie były niemal identyczne.
Przykładowo tworząc coś na kształt galerii składającej się z czterech kolumn.
Utwórz nowy wiersz z jedną kolumną, umieść w tej kolumnie element zdjęcie dokonaj na nim ustawień "Padding" (aby zrozumieć mechanikę użyj ustawień przykładowych o parametrach 20px na każdym kierunku) i skopiuj tę kolumnę jeszcze trzy razy.
Aby dowiedzieć się więcej o tworzeniu kolumn przejdź do sekcji Tworzenie i ustawienia kolumny

Aby skopiować kolumnę, najedź kursorem do prawej krawędzi kolumny na ikonę koła zębatego aby wyświetliło się menu boczne, które przedstawione jest na poniższym zrzucie ekranu.



Następnie kliknij w ikonę której przykład przedstawiono poniżej.



Wykonaj te czynności trzy krotnie aby uzyskać w sumie cztery kolumny.

Jeśli efekt nie jest taki jak chcesz, dokonaj ponownej modyfikacji tylko pierwszej kolumny, usuń pozostałe i ponownej skopiuj tę pierwszą którą modyfikowałeś(aś), pozwoli to na zaoszczędzenie Twojego czasu, zamiast ustawiać każdej kolumnie z osobna wartości i uniknięcia wprowadzenia błędu w pozostałych kolumnach.

Teraz pozostanie Ci już tylko wstawienie obrazków czy tekstu w poszczególne stworzone przez Ciebie szablony.



Ustawienie - Margin

Margin - Odstęp Zewnętrzny od krawędzi (żółty kolor otoczki, przykład 30px wszystkie kierunki).



Opis tej funkcji często wymieniany jest w elementach i warto wspomnieć o tym narzędziu szerzej. Narzędzie to jest stosowane co prawda rzadziej aniżeli "Padding" jednak zdarzają się sytuacje gdzie lepiej je wykorzystać "Margin" niż "Padding".

Aby wprowadzić tego typu zmiany, przenieść np element "Tekst" na stronę lub edytuj już istniejący, kliknij w przycisk Margines (przedstawiony w tytule) wyświetli się menu ustawień.



Na powyższych zrzutach ekranu dla zaprezentowania przykładu ustawiono liczbę 30px we wszystkich kierunkach, możesz jednak dokonać różnych konfiguracji tego ustawienia w zależności tego jaki efekt chcesz uzyskać przy pomocy marginesu.

Wartości możesz podawać w skali %, aby to zrobić kliknij w przełącznik przedstawiony na poniższym zrzucie ekranu.



Aby ponownie wrócić do wartości px ponownie kliknij w przełącznik którego przykład jest poniżej.



Margin odsuwa zawartość elementu od zewnętrznej krawędzi o 30px co widać na powyższych zrzutach ekranu.
Niebieski kolor to zawartość elementu a żółty to obszar odsunięcia elementu od zewnętrznej krawędzi, odsuwać możesz zawartość w czterech kierunkach, górna, prawa, dolna i lewa krawędź, jest to bardzo przydatne gdy na przykład chcesz uzyskać sytuacje która przedstawiona jest na poniższym obrazku lub z jakiegoś innego powodu.

Na powyższym zrzucie ekranu znajdują się obrazki udekorowane pogrubieniem linii za pomocą narzędzia "Krawędzie".
Zwróć jednak uwagę że wszystkie obrazki są równo od siebie odsunięte mimo iż są to 3 kolumny w 2 wierszach.
Aby uzyskać taki efekt wystarczy na każdej kolumnie ustawić dolny margines na 30px, sprawia to że elementy odsuwają się od siebie od spodu co powoduje analogiczny efekt na urządzeniach mobilnym.
Aby zaoszczędzić czas utwórz na pierwszej kolumnie margines dolny na 30px a następnie za pomocą narzędzia kopiuj, powiel ustawioną już przez siebie kolumnę (kopiowanie kolumn wyjaśnione jest w powyższym opisie "Padding" lub szerzej pod linkiem: "Tworzenie i Ustawienia Kolumny").
Kiedy będzie to gotowe utwórz z kolei kopie całego wiersza utworzysz w ten sposób gotową galerie składającą się z 6 obrazków.

Aby skopiować cały wiersz, najedź kursorem na lewą krawędź ekranu na żółte koło zębate, wówczas pojawi się dodatkowe menu boczne, przedstawione na poniższym zrzucie ekranu.



Następnie kliknij w ikonę której przykład przedstawiono poniżej.



Uzyskasz dzięki temu kopię całego bloku gdzie początkowo z trzech kolumn Twojej galerii stworzy się sześć kolumn, zwróć uwagę że jeśli w tym wypadku wszystkie kolumny miały identyczne ustawienia to uzyskasz efekt dokładnie taki jak w powyższym zrzucie ekranu.

Na początek nie przejmuj się ramkami są one opisane w sekcji "Ustawienia Krawędzi".

Dlaczego nie jest konieczne ustawianie prawego i lewego marginesu ?
Ponieważ domyślnie ustawiona na wierszu głównym opcja "Odstęp" ma wartość 15px co daje łącznie odstęp pomiędzy kolumnami równy 30px i to powoduje że nie musisz umieszczać tu marginesów.

Rozwiązanie to jest tylko przykładowe i ma na celu zademonstrować Ci możliwość samego narzędzia jakim jest "Margin".

Postaraj się samodzielnie wypróbować różne konfiguracje.

Poniższy przykład utworzonych kolumn bez zastosowania dolnych marginesów "Margin".

W przeciwieństwie do "Padding", "Margin" staraj się używać tylko w tego typu sytuacjach jak przedstawione jest na powyższych przykładach, gdyż marginesy odsuwają się od zewnętrznych elementów i może to powodować rozsypywanie się elementów strony. Zwróć także uwagę aby na wierszu wyłączyć funkcje "flex" w przeciwnym wypadku na urządzeniu mobilnym kolumny będą bardzo małe i może być to irytujące dla użytkownika strony, natomiast po wyłączeniu wymienionej funkcji "flex" będą one wyświetlały się jedna pod drugą.