Padding și lățimea elementului
Proprietatea CSS width setează lățimea zonei de conținut a unui element. Zona de conținut este partea din interiorul padding-ului, marginii (border) și marginii exterioare (margin) — modelul cutiei (box model).
Deci, dacă un element are o lățime setată, orice padding se adaugă peste acea lățime. Adesea acest lucru nu este ce îți dorești.
De exemplu, un <div> cu o lățime de 300px și 25px de padding ocupă de fapt 350px (300 + 25 + 25).
Exemplu
Lățimea setată este 300px, dar padding-ul împinge lățimea totală la 350px.
<style>, dă unui <div> lățime 300px și padding 25px, plus un border și un fundal. Lățimea reală devine 350px (300 + 25 + 25). Pune text în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
padding: 25px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>The set width is 300px, but the padding makes the total width 350px.</div>
</body>
</html>
Padding și box-sizing
Proprietatea box-sizing stabilește cum sunt calculate lățimea și înălțimea unui element: dacă acestea includ sau nu padding-ul și marginea (border).
Poate avea aceste valori:
content-box— valoarea implicită. Lățimea și înălțimea acoperă doar conținutul, nu și padding-ul sau marginea.border-box— lățimea și înălțimea acoperă conținutul, padding-ul și marginea.
Așadar, pentru a păstra lățimea la 300px indiferent de padding, folosește box-sizing: border-box. Elementul își păstrează lățimea totală, iar mai mult padding lasă pur și simplu mai puțin spațiu pentru conținut.
Exemplu
Cu box-sizing: border-box, lățimea totală rămâne 300px chiar și cu padding.
<style>, dă unui <div> lățime 300px, padding 25px și box-sizing: border-box, plus un border și un fundal. Lățimea totală rămâne 300px. Pune text în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>With box-sizing: border-box, the total width stays 300px even with padding.</div>
</body>
</html>
Toate proprietățile CSS de padding
Un rezumat al proprietăților de padding:
padding— setează tot padding-ul într-o singură declarație.padding-bottom— setează padding-ul de jos.padding-left— setează padding-ul din stânga.padding-right— setează padding-ul din dreapta.padding-top— setează padding-ul de sus.