Модел кутия (модел кутия, модел кутия) - CSS, MDN

В HTML документ всеки елемент на страницата има правоъгълна област (кутия или блок). Механизмът за изобразяване в браузъра определя размера и позицията на полетата на страницата, както и техните свойства като цвят, фоново изображение, за да ги покаже на екрана.

Езикът CSS има специален модел на кутия (също модел на кутия или модел на кутия, английски box model), който описва от какво се състои кутията и какви свойства влияят на нейния размер. В него всяко поле има 4 области:margin (полета),border (рамка),padding (вътрешни полета) иcontent (съдържание или съдържание).

кутия модел

По подразбиране, ако CSS свойството за оразмеряване на кутия не е зададено, размерът на вътрешната област на съдържанието се задава от свойствата width, min-width, max-width, height, min-height и max-height. Ако свойството box-sizing е зададено, тогава то определя за коя област са посочени размерите.

Размерите на подложката се задават индивидуално от различни страни от свойствата padding-top, padding-right, padding-bottom, padding-left или от общото свойство padding.

Размерът на подложката се задава индивидуално в различни посоки чрез свойствата margin-top, margin-right, margin-bottom, margin-left или общото свойство margin.

Полетата на два съседни елемента, разположени един над друг или вложени един в друг, могат да се припокриват. Това се нарича свиване на маржа. Само вертикалните полета се свиват.

За display: inline (или inline-block, inline-table) елементи, количеството пространство, което заемат, също се влияе от стойността на свойството line-height.