margin şi padding sunt două dintre cele mai folosite proprietăţi ce descriu spaţiul dintre elemente, şi ele funcţionează astfel : margin se referă la spaţiul din exteriorul elementului şi padding la cel din interior.

Modificaţi CSS-ul pentru tag-ul h2, astfel :

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}

Vei observa că spaţiul din jurul titlului etichetat cu tag-ul h2, este de marimea unei litere, iar textul e mai gros.

Cele patru părţi ale unui element (cadru) pot fi notate individual: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom şi padding-left. Toate enumerate te ajută să faci un element să arate cum doreşti.

Modelul de cutie (box model)

Margin, padding şi border sunt în acelaşi timp proprietăţi dar şi trăsături ale modelului standard de cutie.”Box model” funcţionează astfel: în centru avem conţinutul (să presupunem că e o poză), în jurul lui e “padding” , apoi “border” şi în final “margin“.

Nu este absolut necesar ca la fiecare element să precizezi aceste informaţii, dar e bine de stiut că orice element de pe pagina ta web poate avea setate aceste proprietăţi, şi cred că asta e un plus la controlul pe care îl ai asupra design-ului site-ului.

Cei care aţi parcurs tutorialul până aici, vreau să nu vă speriaţi de combinaţia română/engleză, încerc doar să vă fac cunoscuţi termenii, pentru că la scriere, nu veţi utiliza româna!!!