Описание

Задайте стойностите на полето вдясно на мястото на елемента. Полето се извиква от вътрешния ръб на рамката на елемента до очевидния правоъгълник, който го заобикаля (фиг. 1).

Силата на запълване ви позволява да зададете стойността на допълването два пъти за всички страни на елемента или да зададете стойността само за определените страни.

Синтаксис

допълване: [стойност | vіdsotki] (1, 4) | наследи

Стойност

Позволено е да се спечелят едно, две, три или няколко значения, като се разделят помежду си с проблем. Ефектът от депозирането под формата на количество е посочен в табл. един.

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

HTML5 CSS2.1 IE Cr Op Sa Fx

Резултат това дупепоказано на фиг. 2.

Ориз. 2. Уплътняваща подложка

Обектен модел

document.getElementById("elementID ").style.padding

браузъри

Internet Explorer до и включително версия 7.0 не поддържа наследената стойност.

Пред разделението задаваме такива CSS правомощия като margin (поле) и padding (вътре). Сега нека да ги разгледаме по-подробно и да погледнем каква смрад вижда човек и изглежда специална.

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

Padding създава празнини между блоковете, докато полето създава пропуски между блоковете

Всъщност полетата на тази CSS стъпка се смесват едно с друго, въпреки че понякога без преразглеждане на кода е невъзможно да се разпознае, с помощта на такъв авторитет се дава да стои. Тя traplyatsya на върховете, ако има рамка или фонов блок с място.

За да зададете полета или CSS стъпки от страната на кожата на елемента, трябва да приложите атакуващата сила:

Стъпки:

• подплата отгоре: смисъл;
• padding-right: смисъл;
• padding-bottom: смисъл;
• padding-left: смисъл;

Полета:

• марж-горе: смисъл;
• поле вдясно: смисъл;
• поле отдолу: смисъл;
• поле вляво: смисъл;

Стойностите могат да бъдат въведени във всякакви CSS единици - px, em, % или така. Задник: margin-top: 15px .

Освен това вече е богата река поле за съкращения и допълване css. Ако трябва да посочите полета или входове за всичките четири страни на елемента, не пишете непременно мощността за облицовката на okremo. Всичко е по-лесно за борба: полето и допълването могат да бъдат посочени в реда от 1, 2, 3 или 4 стойности. Vіd kіlkostі стойност да падне, тъй като rozpodіlyayutsya nalashtuvannya:

• 4 стойности: задайте запълване за всички страни на елемента в следния ред: отгоре, отдясно, отдолу, отзад: padding: 2px 4px 5px 10px;
• 3 стойности: задайте подложката отзад за горната страна, след това веднъж за лявата и дясната и след това за долната: padding: 3px 6px 9px;
• 2 стойности: задайте на гърба на главата едновременно за горната и долната страна, а след това - едновременно за лявата и дясната страна: padding: 6px 12px;
• 1 стойност: задайте едни и същи стъпки от всички страни на елемента: padding: 3px;

Същите тези правила важат за силата на маржин CSS. Не забравяйте, че за поле можете да промените и отрицателни стойности (например -3px), които понякога могат да бъдат по-тъмни.

Свиващ се марж

Демонстрирайте ситуацията: два блокови елемента - един над един и задайте полето за полета. Горното поле е настроено на margin: 60px, а долното поле е настроено на margin: 30px. Би било логично да се предположи, че две полета, които се пресичат, два елемента просто се сблъскват и в резултат на това пространството между блоковете достига 90 пиксела.

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

Свиващото поле е приложимо само за горните и долните полета на елементите и не се появява преди полетата от дясната и лявата страна. Остатъчната стойност на празнината се изчислява в различни ситуации по различни начини:

• Ако стойността за нарушение на маржа е положителна, разширяването на полето в подторбата ще се увеличи до по-голяма стойност.
• Ако една от стойностите е отрицателна, тогава за да се изчисли размерът на полето, е необходимо да се вземе сумата от стойностите. Например, със стойности от 20px и -18px, разширяването на времето за разширяване на полето:
  20 + (-18) = 20 - 18 = 2 пиксела.
• В резултат на обида на стойностите на отрицателните, модулът на числата е равен и се избира числото, което е по-голямо от модула (също и най-малкото от отрицателните числа). Пример: необходимо е да се съпоставят стойностите на полето -6px и -8px. Модулите на por_vnyuvanih числа са добавени 6 и 8 vodpovidno. Звучи като 6-8. Podbag rozmіr поле dorіvnyuє -8 pіkselіv.
• В пъти, ако стойността е посочена в различни единици CSS, вонята се довежда до един, след което сравняват и избират повече стойност.
• Маржът за дъщерни елементи трябва да е по-важен: ако полето е по-голямо за заглавката, по-ниско за бащата, тогава приоритетът се дава на вас. Така възходът на горните и долните поливки на бащите ще стане такъв, какъвто го дава кръпката. С когото и да видиш, татко няма да си.

Tsya vlastіst mozhe майка vіd един до chotirioh значение.

В изображението светлосив цвят показва зона, за която е показана силата на подплънката:

1. По заявка Chotirioh значение(5px 10px 15px 20px ) - редът на разположение на вътрешните стъпки ще бъде: Горна част(5px)- правилно(10px) - дъно(15px)- Наляво(20 пиксела). За да запомните реда на поставяне на вътрешните входове в един глас, можете да изберете английска дума TRоу BLд(де т-Горна част, Р- правилно, Б- дъно, Л- Наляво).


2. По заявка тройна стойност(5px 10px 15px ) - редът на разположение на вътрешните стъпки ще бъде: Горна част(5px)- Дясно ляво(10px) - дъно(15 пиксела).


3. По заявка две стойности(5px 10px) - първата стойност (5px) е да зададете размера на вътрешния достъп до горната и долната част на елемента, другата (10px) стойност - вътрешния достъп до лявата и дясната ръка до елемента.


4. По заявка една стойност(5px) - вътрешният достъп отстрани ще бъде със същия размер - 5px.

Поддръжка от браузъри

CSS синтаксис:

JavaScript синтаксис:

object.style.padding = "5px"

Стойност на Якости

CSS версия

спад

Анимация

Butt vikoristannya

Тази инструкция ви позволява да разберете по-добре това силата на CSSкато граница, подпълване и поле. Силата на властта ще помогне на търговците на дребно да позиционират елементи отстрани на линията към оформлението.

Нека създадем div и над някои граници на мощност, padding и граница.

Power Padding

CSS силата на запълване определя дали границата на елемент е на същото място. Можете да дефинирате йога по следния начин:

• padding-top: 10px;
• padding-right: 10px;
• padding-bottom: 10px
• padding-left: 10px

Tsey записът може да бъде съкратен:

• padding:25px 50px 75px 100px;
  • звяр 25px
  • дясна ръка 50px
  • отдолу 75px
  • zliva 100px
• padding:25px 50px 75px;
  • звяр 25px
  • дясна и лява 50px
  • отдолу 75px
• padding:25px 50px;
  • отгоре и отдолу 25px
  • дясна и лява 50px
• padding:25px;
  • всички 25px

Забележка: Стойността на padding е зададена на ширината на елемента и да се побере във фона на елемента.

В противен случай, очевидно, имаме елемент div с клас div-1:

Div.div-1(ширина:150px; допълване: 25px;)

Браузър за добавяне към ширината на елемента отляво и отдясно. В резултат на това вземаме 200px елемент на граница.

Силова граница

CSS силата на границата ви позволява да дефинирате стила и цвета на границата.

ширина на границата

Мощността на ширината на границата се задава на ширината на кордона. Ширината се задава в пиксели или след помощта на една от предварително зададените стойности: тънък (тънък), среден (среден) или дебел (дебел).

цвят на границата

Силата на границата-цвят zastosovuetsya възложена на цвета на кордона. Цветът може да бъде зададен по следните начини:

• име - име на цвета, например "червен"
• RGB - задава RGB стойността, например "rgb(255,0,0)"
• Hex - показва шестнадесетична стойност, например "#ff0000"

стил на граница

• пунктирана: Значителен кордон
• пунктирана: Означава кордон с точки
• твърдо: Подписен кордон
• двойно: Определете два кордона Между тях легнете според стойността на ширината на границата
• жлеб: Показва обема на впечатления кордон
• билото: Показва обемно подуване кордон.
• вмъкване: Определете кордон, така че блокът да бъде ударен от притискане.
• в началото: Определете кордона така, че блокът да удари отока

Можете да запишете мощността между елементите в съкратен ред:

Div.div-2( граница:1px плътно #ccc; )

Марж на мощност

CSS силата на полето го поставя отстрани на елемент. Margin задава дължината на елемента (Име на граница). Маржинът не може да види цвета на пепелта и винаги става ясен.

Можете да присвоите стойност на марж на елемент като този:

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

Tsey записът може да бъде съкратен:

• margin:25px 50px 75px 100px;
  • горно поле 25px
  • дясно поле 50px
  • долно поле 75px
  • zliva margin 100px
• поле:25px 50px 75px;
  • горно поле 25px
  • ляво и дясно поле 50px
  • долно поле 75px
• поле:25px 50px;
  • горно и долно поле 25px
  • ляво и дясно поле 50px
• поле:25px;
  • всички полета на chotiri 25px

Със стойността на полето зад ключалката можете да разширите блока хоризонтално в центъра.

Силата на CSS padding зависи от настройката на средата на елемента в средата на елемента

Допълване на CSS синтаксис

подпълване: горе вдясно долу вляво;

• отгоре - влизане в горната граница на елемента;
• право – достъп до десния междуелемент;
• дъно – влизане в долната граница на елемента;
• left – достъп до лявата граница на елемента;

Стойностите най-често се задават за пиксели. Също така е позволено да се указват при вида на стойности и други валидни CSS единици.

забележка 1
Разрешено е въвеждането на не повече от една стойност. Flow в зависимост от броя на стойностите ще бъде различен:

• Ако са дадени 3 стойности, тогава първата стойност се задава на звяра, другата - едновременно лява и дясна ръка, а третата - отдолу
• Ако са дадени 2 стойности, тогава първата стойност се задава отгоре и отдолу, другата - лява и дясна отдясно
• Ако е зададена 1 стойност, тогава се задава един и същ достъп за всички страни. Например:

допълване : 10px 10px 10px 10px; Можете да инсталирате по-компактно:допълване: 10px

Бележка 2
За CSS полета не са разрешени отрицателни стойности за допълване.

Също така padding има 4 CSS захранващи линии. Кожа от тях vydpovidaє за yakys директно.

• padding-left - допълване в лявата граница на елемента;
• padding-right – допълване в дясната граница на елемента;
• padding-top - влизане в горната граница на елемента;
• padding-bottom - допълване в лявата граница на елемента;

Например

допълване : 3px 5px 7px 10px; Или можете да зададете отчет: padding-left: 10px padding-right: 5px; padding-top: 3px; padding-bottom : 7px

Нанесете с различни стъпки в средата на елемента

Пример 1. Достъп до текста в средата на етикета

Наличност с нулево допълване (допълване: 0px)

Приклад със същия отвор на кордоните (подплънка: 10px)

Наличност с различни подложки (допълване: 10px 0px 0px 30px)

Оста изглежда така, сякаш е отстрани:

Наличност с нулево допълване (допълване: 0px)

Приклад със същия отвор на кордоните (подплънка: 10px)

Наличност с различни подложки (допълване: 10px 0px 0px 30px)

Пример 2. Достъп до обекта в средата на обекта