CSS Padding. Padding și elementul width. Proprietatea box-sizing.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Proprietatea CSS width specifică lățimea zonei de conținut a elementului. Zona de conținut este porțiunea din interiorul padding-ului, border și marginea unui element (modelul box).
Deci, dacă un element are o lățime specificată, padding-ul adăugat la acel element va fi adăugat la lățimea totală a elementului. Acesta este adesea un rezultat nedorit.
Exemplu:
Aici, elementului <div> i se oferă o lățime de 300px. Cu toate acestea, lățimea reală a elementului <div> va fi de 350px (300px + 25px left padding + 25px de right padding):
div {
width: 300px;
padding: 25px;
}
Pentru a menține lățimea la 300px, indiferent de cantitatea de padding, puteți utiliza proprietatea box-sizing. Acest lucru face ca elementul să-și mențină lățimea; dacă măriți padding-ul, spațiul de conținut disponibil va scădea.Exemplu:
Utilizați proprietatea box-sizing pentru a păstra lățimea la 300px, indiferent de cantitatea de padding:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}