Марж, пълнежа, рамката - тире и кадъра при използване на CSS

Параметри тире CSS

Стъпка по стъпка инструкциите върху доходите на строителни обекти по поръчка

че е възможно да се определят два вида пълнеж Използване на Cascading Style Sheets.

1. Вътрешният подложка - разстоянието от въображаемите границите на елемента за съдържанието му. гама стойност е използване параметър подложка. Такова уплътнение елемент принадлежи и се съхранява в него.

2. Външно тире - разстояние между границата на текущата уеб страница елемент и границите на съседни елементи, или майка елемент. размер разстояние регулируема функция марж. Такава тире е извън член.

За по-голяма яснота на снимката:

Марж, пълнежа, рамката - тире и кадъра при използване на CSS

Помислете например за клетка HTML маса, пълна с текст. След това вътрешната подложка е разстоянието между въображаемата граница на клетката и текста, съдържащ се в него. Външната вдлъбнатината е разстоянието между границите на съседни клетки. Нека започнем с вътрешна подплата.

Допълване на CSS, използвайки подложка (горе, долу, ляво, дясно)

Стъпка по стъпка инструкциите върху доходите на строителни обекти по поръчка

стил имущество уплътнение-ляво, уплътнение-отгоре, уплътнение десен уплътнение дъно и ще ви позволи да определите стойността на вътрешния подложка, съответно, наляво, отгоре, точно и долната част на елемент интернет страницата:

Вдлъбнатината да укажете на пиксела (пиксели), процента (%) или друго приемливо за CSS единици. При определяне на процента стойност се изчислява от ширината на елемента. За да наследи показва, че той е наследен от родител.

Например, токът Кандидатствах правило параграф стил определяне на лявата граница на 20 пиксела, горната граница е 5 пиксела, вдлъбнатината 35 отдясно и отдолу пиксела 10 пиксела. правила рекорд в листове досието на Cascading Style ще изглежда по следния начин:

p.test подложка ляв: 20px;
подложка-отгоре: 5px;
вата-надясно: 35px;
подложка дъно: 10px
>

Сглобяеми правило уплътнение ви позволява да определите граници от всички страни едновременно на елементи в уеб страницата:

пълнеж: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

В националното правило се оставя да се използват един, два, три, или четири стойности, разделени с интервал между тях. В този случай, ефектът зависи от броя на стойностите:

ако посочите една стойност, тя ще определи вдлъбнатината от всички страни на елемент на страницата;
ако посочите две стойности, като първата ще определи вдлъбнатината на горната и долната част, а втората - в ляво и дясно;
ако посочите трите стойности, като първата ще определи вдлъбнатината от върха, а вторият - в ляво и дясно, а третият - от дъното;
Ако не са посочени четири стойности, първото тире на върха на стойността, а вторият - в дясно, третият - от дъното, а четвъртото - в ляво.

Така CSS правила по-горе може да се сведе до минимум и писмено, както следва:

марж собственост или подложките в външен CSS

Стъпка по стъпка инструкциите върху доходите на строителни обекти по поръчка

Атрибути стил марж-наляво, марж-отгоре, марж-надясно и долна граница да ви позволи да определите стойността на външната вдлъбнатината, съответно, наляво, отгоре, точно и отдолу:

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

Вдлъбнатината да укажете на пиксела (пиксели), процента (%) или друго приемливо за CSS единици:

Авто стойност означава, че размерът на отстъп ще се изчислява автоматично от браузъра. В случай на използване на скоростта на записване, вдлъбнатината изчислява в зависимост от ширината на контейнера майка. И това се отнася не само до марж-наляво и марж десен, но също така и на маржин-горната и долна граница маржове като процент ще се изчислява в зависимост от ширината, а не от височината на съда.

Тъй като стойностите на външния отстъп е допустимо да се прилагат отрицателни стойности:

Ако съседните елементи са изтласкани отстъп за положителни стойности, а след това на отрицателната стойност на съседния блок да naedet елемент, за който ние поискахме отрицателен отстъп.

Външно уплътнение можем също да се уточни марж с помощта на атрибута стил. Тя определя стойността на вдлъбнатината в същото време от всички страни елемент уеб-страница:

марж: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

в рамките на параметрите, използвайки граничния имота

Има три вида на параметри при конфигуриране на рамки:

гранично-ширина - дебелина на рамката;
граничен цвят - цвета на рамката;
гранично-стил - тип линии, с които да се направи граница.

Започваме с параметъра дебелина рамка:

гранично-ширина: [стойност | тънък | среда | дебел] | наследят

Дебелината на рамката може да се настрои в пиксели или в други свободни апартаменти в CSS. Променливи тънък, средно дебела и плътна конструкция се настройва на 2, 4 и 6 пиксела съответно:

Що се отнася за уплътнение и поле за параметър граница ширина могат да използват една, две, три или четири стойности, като по този начин за определяне на дебелината на рамката за всички страни едновременно, или всеки поотделно:

гранично-ширина: 5px 3px 5px 3px

За да бъде дебелината на текущата точка горна рамка на 1 пиксел на десния 2 пиксела, по-ниска 3px, и си тръгна с 4 пкс по правило

Със стил атрибути граничен ляво ширина, граничен най-ширина, граничен десен ширина и гранично-отдолу ширина може да бъде определен с дебелина съответно наляво, отгоре, точно и долни страни на рамката:

Граничният-цвят следващия параметър, с която можете да контролирате цвета на рамката:

гранично-цвят: [цвят | прозрачен] | наследят

Тя ви позволява да зададете цвят на рамката, след като за всички страни елемент или само за определен. Стойността може да бъде пуснато в експлоатация в продължение на HTML цветови начините на работа: шестнадесетичен код, ключови думи и др.:

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

С атрибутите на граничния наляво-цветен стил, граничен най-цветни, граничен десен цвят и граничен отдолу цвят, можете да зададете цвят, съответно, наляво, отгоре, точно и долната страна на рамката:

И последният вариант е граничен стил определя типа на рамката:

Тип на рамката може да бъде определен, след като за всички страни елемент или само за определен. Като стойности можете да използвате няколко ключови думи. Вид ще зависи от дебелината на браузъра и рамка. Стойност никой подразбиране и показва рамката и дебелината му е зададено нула. Значение скрит има същия ефект. Frame получени за други стойности в зависимост от дебелината е показано в таблицата по-долу:

Атрибути стил граница ляв стил, граничен най-стил, граничен десен стил и гранично-отдолу в стил определен стил на линия, която ще бъде съставена, съответно, наляво, отгоре, дясна и долната страна на рамката:

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

граница: [граница ширина граница стил граничен цвят] | наследят

Стойностите могат да бъдат във всякакъв ред, разделени с интервал:

За да инсталирате само определена граница елемент съществува страни свойства граничен отгоре, граничен дъно, на границата-ляво, граничен десен, уточняват параметрите, които позволяват съответно за горната, долната, лявата и дясната страна рамки.

Остава само да се обобщи:

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

Имайте предвид, че всички тези CSS свойства увеличат размера на уеб-страница елемент. Затова, ако се промени дебелината на границата или на размера на вдлъбнатината в блока на контейнери, които са дизайна на уеб-страница, ще трябва да се променят съответно на размера на контейнерите, или те могат да бъдат изместени, а дизайнът ще бъде счупен.

Това е всичко, докато се срещнем отново!

Създаване на сайт от начало до край

Получете безплатна книга

Вземи статия по пощата