CSS – marginesy

Loading Likes...

Dzisiaj omówimy sobie jeden styl z naszej technologi kaskadowych arkuszy stylów. W tym artykule między innymi:
1. Model pudełkowy
2. Co to jest margines
3. Deklarowanie na kilka sposobów
4. Jednostki marginesów
5. Cecha nakładania się marginesów

1.Aby mówić o marginesach, należy wspomnieć o pudełkowym modelu, który występuje w naszych przeglądarkach domyślnie. Przedstawiony jest na obrazku poniżej.
2.Margin – nasz margines to jeden ze stylów takiego modelu, którym dzisiaj się zajmiemy.
Margines to przestrzeń, między ramką elementu, a danym elementem. Kiedy padding i border są wyzerowane, wówczas marginesy przylegają bezpośrednio do naszej zawartości.

3.Deklarujemy go na kilka sposobów:

4. Jednostki marginesów możemy podawać, tak jak inne jednostki na naszej stronie.
a) px – w pikselach
b) % – wtedy dynamicznie będą się ustawiały nasze marginesy w zależności o wielkości naszego okna
c) cm – centymetrach itp.
d) em – jednostka, o której więcej napiszemy w przyszłości

5. Marginesy mają domyślnie ustawione tzw. nakładanie się na siebie. Oznacza to, że:
Jeżeli mamy obok siebie dwa elementy:
*obrazek nr1 z marginesem dolnym 10px
*obrazek nr2 z marginesem górnym 10px
i te obrazki są ustawione jeden pod drugim, to odległość między tymi obrazkami będzie wynosić 10px, a nie tak jakby mogło się wydawać 20px.
*umawiamy się,że inne wartości jak border czy padding są wyzerowane

To ważna cecha, o której trzeba pamiętać. Pomaga to w pozycjonowaniu elementów na naszej stronie.
Pamiętajmy także, że jeśli nie zadeklarujemy wartości marginesów w jakimś elemencie, to przeglądarka może ustawić domyślnie jakiś margines. Element może także odziedziczyć (ustawić swój margines na wartość taką, jak elementu rodzica) wartość. Na obrazku poniżej widać nasz tytuł bloga jako przykład. Czerwonym kolorem zaznaczony jest margines.

Marginesy to ważny styl, zwłaszcza jeżeli chodzi o pozycjonowanie elementów, dlatego warto opanować go do perfekcji. Wszystko przed Tobą! Powodzenia i zapraszam do kolejnych wpisów.

You May Also Like

About the Author: Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie Profil: "Informatyka i Ekonometria" Specjalizacja: "Programowanie urządzeń mobilnych i aplikacji sieciowych" Hobby:
  • Programowanie: Typowy front: HTML/JS/CSS Do tego: Angular 2+/IONIC/Cordova
  • Rozwój osobisty - ciągły rozwój w każdym aspekcie życia: fizycznym/psychicznym/duchowym - do tego dążę i obserwuję/uczę się od: Kołcz Majk(Michał Wawrzyniak) oraz Mateusz Grzesiak [w przyszłości planuję zainteresować się co ma do powiedzenia multimiliarder Richard Branson]
  • Grafika - swego czasu interesowałem się retuszowaniem zdjęć w Photoshopie oraz tworzeniem grafik w Illustratorze
  • siatkówka (GeoVolley Team) na pozycji środkowego
  • Filmy - od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) - w liceum dzięki profilowi z modułem filmowym mogłem bardziej wejść w szczegóły kadrów, ujęć itd.
  • Psychologia - niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę :(

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Facebook
Inline
Inline