CSS padding property: как се правят полета
CSS предлага на уеб разработчиците огромни възможности за създаване на HTML страници. Те могат да изглеждат трудни за начинаещи, но ако се справите внимателно и методично с тях, технологията на стиловите листа ще бъде потисната, а оформлението на сайтовете вече няма да е трудно. Едно от необходимите свойства на CSS е подпълването . Използва се за задаване на полета за блокове от HTML страници.
Какво представляват блоковете?
Обектът е изграден от тухли - блокове. Освен това всеки елемент, независимо от неговото съдържание, трябва да има правоъгълна форма. Това означава, че всички изображения и надписи са мислено сключени от разработчика в "кутиите", с които той създава уеб страница.
Най-често блоковете се задават с етикети.
,
- , , CSS свойствата се прилагат към всеки такъв елемент: padding , margin , border , width и др. Ширината на блок правоъгълник се дава от свойството width , след което всеки елемент се състои от полета, очертани с атрибута border. И накрая, компонентът на страницата може да има външни полета или отстъпи, поле , което го разделя от друг блок. Синтаксис на свойствата на CSS запълване
Създателите на каскадни стилови таблици предоставиха няколко опции за писане на атрибут за задаване на полета. Можете да направите празен участък в блока по осем различни начина! Таблицата по-долу показва примери за всяка от опциите и им дава кратко обяснение.
Пример за използване
изясняване
пълнеж: 15 px;
Ако атрибутът е последван от едно число, това означава, че елементът ще има същите полета от всички страни. Записът на px приема, че стойността е в пиксели. Това означава, че блокът ще има полета от 15 пиксела.
пълнеж: 18 px 36 px;
Първата от двете числа показва, че вертикалните полета ще бъдат по 18 пиксела, а страничните полета два пъти по-големи - 36 пиксела.
пълнеж: 6 px 12 px 18 px;
Средната стойност е стойността на полетата от двете страни (ляво и дясно), другите две са вертикални. Първото число (6 px) се отнася до горното поле, а последното (18 px) се отнася до долното.
пълнеж: 6 px 12 px 18 px 36 px;
Формата на свойството CSS padding , в която има четири числа, ви позволява да укажете полета от всички страни на блока. Числените стойности се прилагат последователно към горното поле и по-нататък по посока на часовниковата стрелка надясно, надолу и наляво.
подложка-ляво: 14 px;
Лявото допълнение говори само за себе си - полето ще бъде зададено само отляво на елемента.
запълване-дясно: 14 px;
Подобно на предишната опция за запис, полето ще бъде създадено само отдясно на блока.
подложка: 14 px;
Записът идентифицира полето в горната част.
подложка-дъно: 14 px;
Този запис идентифицира полето по-долу.
Трябва да се отбележи, че подразбиращата се CSS подложка е нула. Този атрибут не е наследствен, т.е. трябва да бъде зададен за всеки блок. В допълнение към обичайните и разбираеми пиксели, ширината на празното пространство около блоковете е дадена в относителни единици. Например в горните примери можете да запишете 5% - като резултат, ширината на полето се изчислява от браузъра автоматично.
Как да използвате имота?
Така че, формулите за запис на атрибути се преглеждат, но как да ги използваме на HTML страница? Първата опция е по-красива, когато всичко, свързано с CSS технологията, не е написано в HTML, а е направено в отделен файл с подходящо разширение.
Втората опция е да пишете директно в < style > маркер. Запълването на CSS в този случай се дефинира както следва:
< div style = " padding: 22 px">
Как да напишем атрибут - изберете производител. Във всеки случай е необходимо да притежавате всички начини за използване на имота за определяне на полетата, за да го използвате по повод.
Синтаксис на свойствата на CSS запълване
Създателите на каскадни стилови таблици предоставиха няколко опции за писане на атрибут за задаване на полета. Можете да направите празен участък в блока по осем различни начина! Таблицата по-долу показва примери за всяка от опциите и им дава кратко обяснение.
Пример за използване | изясняване |
пълнеж: 15 px; | Ако атрибутът е последван от едно число, това означава, че елементът ще има същите полета от всички страни. Записът на px приема, че стойността е в пиксели. Това означава, че блокът ще има полета от 15 пиксела. |
пълнеж: 18 px 36 px; | Първата от двете числа показва, че вертикалните полета ще бъдат по 18 пиксела, а страничните полета два пъти по-големи - 36 пиксела. |
пълнеж: 6 px 12 px 18 px; | Средната стойност е стойността на полетата от двете страни (ляво и дясно), другите две са вертикални. Първото число (6 px) се отнася до горното поле, а последното (18 px) се отнася до долното. |
пълнеж: 6 px 12 px 18 px 36 px; | Формата на свойството CSS padding , в която има четири числа, ви позволява да укажете полета от всички страни на блока. Числените стойности се прилагат последователно към горното поле и по-нататък по посока на часовниковата стрелка надясно, надолу и наляво. |
подложка-ляво: 14 px; | Лявото допълнение говори само за себе си - полето ще бъде зададено само отляво на елемента. |
запълване-дясно: 14 px; | Подобно на предишната опция за запис, полето ще бъде създадено само отдясно на блока. |
подложка: 14 px; | Записът идентифицира полето в горната част. |
подложка-дъно: 14 px; | Този запис идентифицира полето по-долу. |
Трябва да се отбележи, че подразбиращата се CSS подложка е нула. Този атрибут не е наследствен, т.е. трябва да бъде зададен за всеки блок. В допълнение към обичайните и разбираеми пиксели, ширината на празното пространство около блоковете е дадена в относителни единици. Например в горните примери можете да запишете 5% - като резултат, ширината на полето се изчислява от браузъра автоматично.
Как да използвате имота?
Така че, формулите за запис на атрибути се преглеждат, но как да ги използваме на HTML страница? Първата опция е по-красива, когато всичко, свързано с CSS технологията, не е написано в HTML, а е направено в отделен файл с подходящо разширение.
Втората опция е да пишете директно в < style > маркер. Запълването на CSS в този случай се дефинира както следва:
< div style = " padding: 22 px">
Как да напишем атрибут - изберете производител. Във всеки случай е необходимо да притежавате всички начини за използване на имота за определяне на полетата, за да го използвате по повод.