Margines, dopełnienie i obramowanie elementu w css

Pobierz fragment podręcznika css.

Elementy na stronie www traktowane są jak pojemniki w których coś jest. Taki pojemnik zawiera:

  • margines czyli odstęp od innych elementów
  • dopełnienie czyli odstęp zawartości od brzegu
  • obramowanie

Jeśli nie ustawimy tych wartości w stylach css, przeglądarka ustawi własne, domyślne. Niestety każda przeglądarka ma nieco inne ustawienia domyslne, stąd strona może wyglądać inaczej. Dlatego też stosuje się plik reset.css, który zeruje wszystkie ustawienia domyślne, aby można było je ustawić na nowo. Pozwala to na wyświetlanie strony podobnie w wielu przeglądarkach.

Wartości tych elementów podajemy w procentach, pixelach dla całości lub poszczególnych krawędzi:

  • jedna wartość taka sama dla wszystkich krawędzi np. margin: 0
  • cztery wartości podajemy zgodnie ze wskazówkami zegara kolejno: góra, prawy, dół, lewy np. margin: 5px 10px 2px 20px
  • dwie wartości oznaczają góra i dół oraz prawy i lewy np. margin: 5px 10px

Jeżeli elementy graniczą ze sobą w pionie to ich marginesy się nie sumują, lecz przeglądarka wyświetla tylko większy margines, zaś margines mniejszy się w nim chowa.  Nie dzieje się tak jeśli elementy graniczą w poziomie, są opływające.

Zaokrąglone rogi

Jeszcze do niedawna jedynym sposobem utworzenia zaokrąglonych rogów była grafika. Obecnie można je uzyskać przy pomocy CSS.

opisujemy je deklaracją:

border-radius:  10px; – tworzy zaokrąglenie kołowe o promieniu 10 pikseli takie same dla wszystkich rogów
border-radius: 40px/20px; – zaokrąglenie eliptyczne, pierwsza wartość to zaokrąglenie poziome, druga pionowe

na takiej samej zasadzie jak pozostałych elementów.  Można określić inne zaokrąglenie dla każdego rogu. Można nawet dać okrągłe i eliptyczne dla różnych rogów tego samego elementu.  Można też określić osobno zaokrąglenie dla różnych rogów:

border-top-left-radius: 1em;
border-top-right-radius: 2em;
border-bottom-right-radius: 1.5em;
border-bottom-left-radius: .75em;

Rzucanie cienia

CSS3 pozwala na rzucanie cienia przez element na stronie. Jeszcze do niedawna można było uzyskać takie efekt tylko w postaci grafiki.

box-shadow: przesunięcie poziome, przesunięcie pionowe, rozmiar cienia, promień cienia, kolor cienia
box-shadow: -4px 6px 8px #000000;

Dla przesunięcia w poziomie wartość ujemna przesuwa w lewo a dodatnia w prawo. Dla przesunięcia w pionie, wartość ujemna przesuwa w górę a dodatnia w dół.
Promień cienia oznacza jego rozmazanie – im większa wartość tym większe rozmazanie.

Cień można określić również jako inset czyli wewnętrzny:

box-shadow: inset 4px 4px 8px rgba(0,0,0,.75);

kolor cienia można określić jako częściowo przezroczysty rgba

Jeden element może mieć kilka cieni. Ich deklaracje są oddzielone przecinkami.

 Wysokość i szerokość elementów na stronie

Elementowi można nadać wysokość i szerokość – height, width

Ważne jest aby pamiętać, że przeglądarka oblicza miejsce dla elementu na stronie sumując jego zawartość, dopełnienie, obramowanie i margines. Dlatego jeśli zapomnisz o tym i ustawisz obok siebie kilka elementów to po prostu nie zmieszczą się i ostatni zjedzie na dół.

Jeśli chodzi o wysokość elementu to stwarza ona dużo problemów. Zależy nam na tym aby zawartość elementu nie wychodziła poza brzegi, chcemy żeby dwie kolumny były równej długości. Niestety zadeklarowanie wysokości elementu nie pomoże i trzeba tu stosować inne pomysły. Uzyskanie kolumn o równej wysokości jest dość trudne – można tu zastosować zagnieżdżone divy lub javascript.

CSS3 posiada nową właśność box-sizing, dzięki której można samemu określić jak przeglądarka ma liczyć szerokość i wysokość elementu.

box-sizing:content-box – domyślna, suma wszystkich właściwości
box-sizing:padding-box – szerokość obejmuje dopełnienie
box-sizing:border-box – szerokość obejmuje dopełnienie i obramowanie co oznacza, że element zajmuje taką szerokość jak ustawimy bez względu na to jakie ma dopełnienie i ramkę.

obecnie trzeba je jeszcze stosować z przedrostkami przeglądarek

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

CSS pozwala również na ustalenie maksymalnej i minimalenj szerokości i wysokości:

max-width, min-width, max-height, max-width

Overflow – sterowanie mieszczeniem się zawartości w obszarze

Jeśli zawartość jest większa niż wielkość obszaru może się wylać poza brzegi, co wygląda nieładnie. CSS pozwala na decydowanie czy i jak zawartość ma się wylewać:

overflow: visible – normalne wylewanie, domyślna wartość
overflow: hidden – nadmiar zawartości chowa się i zawartość nie wylewa się na zewnątrz
overflow: scroll – dodaje pasek przewijania nawet wtedy gdy zawartości jest malo
overflow: auto – w razie potrzeby pojawia się pasek przewijania

 

 

 

 

Pobierz fragment podręcznika css.

2 Comments
  1. Nowe media queries dają ciekawe efekty wizualane, sama korzystam z cieni rzucanych przez prostokąty na podłoże, bardzo fajny efekt.

Leave a reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.