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;
}

 


Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.