Margin si Padding
Aceasta proprietate, Margin defineste spatiul liber din jurul unui element HTML (in exteriorul borderului).
Valoare acestei proprietati, margin, nu se mostensesc de la elementele parinte,nu are culoare e background si este complet transparent.
Se pot seta toate margin-urile dintr-o singura proprietate sau individul pentru top, right, bottom si left.
Valoare | Descriere |
auto | Browserul decide ce margin sa lase |
marime | Puteti specifica o anumita merime calculata in px, pt, cm, etc.(standard este 0px) |
procent | Specificam dimensiunea margin-ului calculata in procente. |
inherit | margin-ul este mostenit de la elementul parinte. |
Atentie: Se pot folos si valori negative pentru a suprapune continut.
Margini individuale
Am spus si mai sus, putem seta margin-ul cu o singura proprietate sau individual pentru fiecare margine a elementului.
Acum am sa va dau un exemplu de margin individual pentru fiecare latura.
div { margin-top: 10px; margin-bottom: 10px; margin-right: 15px; margin-left: 5px; }
Margini
Cu aceasta “versiune scurta” este posibil sa specificam toate marginile printr-o singura proprietate.Aici avem mai multe optiuni, putem specifica decat 2 valori (sus-jos si stanga-dreapta):
div{ margin: 10px 5px; }
Putem specifica o singura valoare (va fi folosita la toate marginile):
div{ margin: 10px; }
Putem specifica 3 valori (sus, stanga-dreapta si jos):
div{ margin: 10px 5px 7px; }
Sau putem specifica 4 valori (sus, dreapta, jos, stanga):
div{ margin: 10px 5px 10px 5px; }
Padding
Padding se numeste spatiul dintre border si continutul elementului.
Spre deosebire de margin, padding-ul este afectat de culoarea backgroundului elementului HTML.
Ca si in cazul margin, padding-ul poate fi setat pentru toate marginile sau pentru fiecare individual.
Valoare | Descriere |
marime | Puteti specifica o anumita merime calculata in px, pt, cm, etc.(standard este 0px) |
procente | Specificam dimensiunea margin-ului calculata in procente. |
Setarea padding-ului individual pentru fiecare latura:
div { padding-top: 10px; padding-bottom: 10px; padding-right: 15px; padding-left: 5px; }
Ca si in cazul margin este posibil sa specificam toate padding-urile printr-o singura proprietate.Aici avem mai multe optiuni, putem specifica decat 2 valori (sus-jos si stanga-dreapta):
div{ padding: 10px 5px; }
Putem specifica o singura valoare (va fi folosita la toate padding-urile):
div{ padding: 10px; }
Putem specifica 3 valori (sus, stanga-dreapta si jos):
div{ padding: 10px 5px 7px; }
Sau putem specifica 4 valori (sus, dreapta, jos, stanga):
div{ padding: 10px 5px 10px 5px; }