Margin si Padding

postat acum 4 ani de Stefanescu Mihai in categorie 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;
}

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!