Margin si Padding

Stefanescu Mihai 2 years ago CSS

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

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
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.