CSS Box Model. Lățimea și înălțimea unui element.
Partajeaza in Google Classroom
Teorie: Descriere video Descarcă PDF
Pentru a seta corect lățimea și înălțimea (width și height) unui element în toate browserele, trebuie să știți cum funcționează modelul casetei (box model).
Exemplu:
Acest element <div> va avea o lățime totală de 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Iată calculul:Lățimea totală a unui element trebuie calculată astfel:
Lățimea totală a elementului = width + left padding + right padding + left border + right border + left margin + right margin
Înălțimea totală a unui element trebuie calculată astfel:
Înălțimea totală a elementului = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin