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

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.