CSS Box Model. Explicația diferitelor părți: content, padding, border, margin.

Susține Lectii-Virtuale!

CSS Box Model

Toate elementele HTML pot fi considerate casete (boxes). În CSS, termenul „model de cutie”(box model) este utilizat atunci când vorbim despre design și aspect.
Modelul CSS box este în esență o cutie care se înfășoară în jurul fiecărui element HTML. Este format din: margini, borders, padding și conținutul real.
Imaginea de mai jos ilustrează modelul casetei (box model):



Explicația diferitelor părți:

Content - Conținutul căsuței, unde apar text și imagini.
Padding - Șterge o zonă din jurul conținutului. Padding este transparent.
Border - O graniță care se întinde pe padding și content.
Margin - Șterge o zonă în afara graniței. Marginea este transparentă
.
Modelul casetei (box model) ne permite să adăugăm un chenar în jurul elementelor și să definim spațiul dintre elemente.

Exemplu:

Demonstrația modelului cutiei (box model):

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}