Containere

Toate aceste elemente HTML (div,p, span, nav, section, aside, etc) ar putea fi considerate containere, de unde si titlul, iar in acest articol am sa vorbesc despre ce stiluri css le putem aplica.

Aceste containere nu sunt altceva decat elemente HTML puse in jurul textului sau a altor elemente HTML. Poate avea margin, border si padding.

Mai jos am postat o imagine in care am explicat cat am putut de simplu ce sunt aceste elemente de care am tot vorbit si anume margin, border si padding.

Hai sa va explic ce am scris in imagine:

• Continut– Acesta este continutul acelui element HTML, fie ca vorbim de text, imagini sau alte elemente HTML.
• Padding – Acesta este spatiul dintre continut si conturul containerului.
• Border – Conturul containerului.
• Margin – Spatiul dintre conturul containerului si alte elemente de pe langa acesta.

Inaltimea si Latimea unui element

Hai sa ii dam o latime de 200 px unui div:

div {
    width: 200px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Am zis mai sus ca padding-ul si margin-ul se adauga separat, hai sa facem calculul:

Avem continutul de 200px latime si un padding de 10px, deci div-ul final are o latime de 220px.

200px latime + 10px padding in partea dreapta si 10px padding in partea stanga.