Każdy element w dokumencie HTML zajmuje określony obszar. Obszar ten nazywany jest pudełkiem i składają się na niego: - zawartość (content) - "marginesy" wewnętrzne (padding) - obramowanie (border) - marginesy (margin) Wszystkie te opcje wpływają na wielkość pudełka. Domyślnie wielkość pudełka ustawiona jest na zawartość (content-box), co oznacza, że jeśli ustawisz szerokość lub wysokość elementu np. na 200px i dodasz do niego paddingi, obramowanie lub marginesy, to wielkość pudełka zwiększy się o te dane. Jeśli chcesz, aby paddingi lub obramowanie nie zwiększały rozmiarów pudełka na zewnątrz, możesz ustawić mu zawartość padding-box lub border-box. Dostępne opcje dla atrybutu box-sizing: content-box | border-box | padding-box