Учебни записки

4. CSS

4.2. Кутиен модел (Box model)

Кутиен модел (Box model) се нарича основна идея в CSS която означава, че когато софтуерът извършва подреждане на елементите на една страница, за всеки елемент заделя някакво пространство с форма на правоъгълник (кутия) и след това подрежда тези кутии от ляво надясно. Правоъгълникът, за който вече няма място на започнатия ред се поставя на следващ ред и т.н. Този процес на подреждане на английски се нарича render.

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

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

Таговете с едни имена по подразбиране са inline елементи (a, img, span), а други по подразбиране са block елементи (h1, ... h6, p, div), но типът на елемента може и да се зададе изрично с CSS деклараците display:inline; и display:block; съответно.

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

След първоначалното определяне на правоъгълника, в който трябва да се вмести даден елемент, той се поставя навътре в този правоъгълник на разстояние, което се нарича вътрешно отстояние или padding. Около заделения за елемента правоъгълник може да се очертае рамка или border, а около тази рамка следва пространство, в което не трябва да попадат други елементи, наречено външно отстояние или margin. Ширините на тези рамки може да бъдат различни за всяка от страните, тогава към името на съответното разстояние се добавя и посоката, например: patting-left, padding-top, border-right, margin-bottom и т.н. във всички възможни съчетания на padding, border, margin и top, right, bottom, left.