CSS: модел на кутията

Създаването на рамки, вътрешни отстъпи и разстояния между отделните елементи на HTML страниците става по т.нар. модел на кутията (box model). Всеки HTML елемент може да се представи като сложен в своя кутия, която има следните компоненти:

• граница (margin): най-външната част на кутията, която е безцветна и прозрачна. Колкото по-голяма е границата, толкова по-голямо е разстоянието до съседните елементи.
• рамка (border): огражда съдържанието и вътрешния отстъп.
• вътрешен отстъп (padding) : разстоянието между съдържанието на кутията (самия елемент) и рамката. За разлика от границата, вътрешният отстъп може да бъде оцветен - определя се от фоновия цвят на кутията.
• съдържание (content): същинската част на кутията, самият елемент - снимка, таблица, текстово поле и т.н.

Как работи модела на кутията?

Определяне на широчина и височина на елемент

Когато задавате широчина и височина на даден елемент с width и height, Вие указвате само размера на съдържанието. Размерът на цялата кутия зависи още от границата, рамката и вътрешния отстъп.

Нека например за елемент са указани следните параметри:

width:200px;

padding:20px;

border:2px solid blue;

margin:15px;

За тази кутия широчината ще бъде 200 (съдържанието)+2*20 (ляв и десен вътрешен отстъп)+2*3 (лява и дясна рамка)+2*15 (лява и дясна граница)=276 px.

Както виждате, елементът ще заема значително повече пространство от указаната за съдържанието широчина. Това трябва да се има предвид, когато изграждате страниците си, за да не се получава застъпване на отделни елементи.

Модел на кутията и Internet Explorer

Повечето браузъри пресмятат размерите на кутията по току-що описания начин. Едно съществено изключение прави Internet Explorer - за този браузър width включва рамката border и отстъпа padding. По тази причина елементи, за които е указана широчина с width, ще изглеждат по-тесни, отколкото в останалите браузъри. Също важи и за височината (height).

Решението на проблема обаче е много лесно: достатъчно е да се укаже DOCTYPE за HTML документа, и Internet Explorer ще се съобрази с общоприетия начин за използване на метода на кутията.