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.

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.

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