Probabil ca va intrebati de ce avem si padding si margin si cand se foloseste una si cand alta.

Diferenta dintre ele este destul de subtila dar ne putem gandi ca:

  • margin este folosit pentru a separa un element de alte elemente din jurul lui
  • padding este folosit pentru a indeparta continutul de marginea interioara a lui.

Dar atunci cand chenarul unui element nu este vizibil (cand nu folosim proprietatea border) diferenta dintre cele doua nu este atat de mare.

Adica ambele pot fi folosite pentru a indeparta continutul unui element de alt element.

Dar depinde de noi cand sa folosim o regula si cand alta.

Cand sa folosim padding si cand margin

In general ne putem gandi la urmatorul lucru cand vrem sa folosim o regula in locul celeilalte: atunci cand tine de modul in care un element interactioneaza cu alt element, folosim margin, cand tine de stilizarea interna a elementului folosim padding.

Vertical margin collapse

Atunci cand folosim margin pe doua elemente block care vin unul dupa altul, precum aceste doua paragrafe, se creeaza un efect ciudat: 

<html>
    <head>
        <style>
            .primul-paragraf {
                margin-bottom: 10px;
            }
            
            .al-doilea-paragraf {
                margin-top: 15px;
            }
        </style>
    </head>
    <body>
        <p class="primul-paragraf">
            Primul paragraf ce are o margine jos de 10px.
        </p>
        <p class="al-doilea-paragraf">
            Un alt paragraf cu o marginea de sus de 15px.
        </p>
    </body>
</html>

Asadar primul paragraf are o margine inferioara de 10px iar al doilea o margine superioara de 15px. Putem trage concluzia ca distanta dintre cele doua paragrafe va fi de 25px, nu?

In realitate distanta dintre ele este de 15px, cea mai mare valoarea dintre cele doua.

Cand avem doua elemente block marginea verticala intre ele se anuleaza si ramane doar maginea cea mai mare. Daca primul paragraf ar fi avut o margine de 20px atunci, aceea ar fi fost distanta dintre paragrafe.

Acest lucru nu se intampla pe orizontala. Daca avem doua elemente block unul langa altu, cu o margine dreapta si una stanga de 10px atunci, distanta dintre ele va fi de 20px.

Si acest lucru nu se intampla cu padding-ul. Valoare lui nu va fi anulata de valori ale elementelor vecine.

Putem lua si acest fenomen de vertical margin collapse in calcul cand vrem sa ne decidem intre margin si padding.

< Înapoi Următoarea lecție >