CSS Box Model. Lățimea și înălțimea unui element.

Lățimea și înălțimea unui element (Width and Height of an Element)

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