източник: поле или подложка?
Филип Спорер.
Превод: vl49.

Кога е по-добре да се използват полета и кога да се използва подложка за целите на форматирането и има ли значение?

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

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

AT този примерИма два вида интервали:

между карти (сини);

между картите и техния контейнер (зелен);

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

Прилагате пример с CSS?

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

Контейнер(
подложка: 16px
}
.card + .card(
поле: 0 0 0 8px;
}

Само 2 селектора и 2 правила.

Каква е функцията на знака плюс?

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

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

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

Всичко работи добре, докато не трябва да поставим нещо различно от карта до картите. Добре, да кажем бутон „Добавяне на карта“ („Добавяне на карта“):

Въз основа на CSS фрагмента, който вече имаме, вероятно няма да дадем на новия елемент, който представлява бутона, клас .card, тъй като това не е карта. Как да бъдем? Заслужава ли си да създадете допълнително име на клас .add-card, което съдържа същото правило със свойство margin като класа .card? Не, има по-добро решение.

Лоботомизирана сова *+* .

И как изглежда. Въпреки смешната асоциация, този метод работи чудесно и го използвам постоянно, откакто разбрах за него. И така, за какво е всичко това? Ето един поглед към съответния CSS код:

Контейнер(
подложка: 16px
}
/* Е, разпознахте ли лоботомираната сова? */
.container > * + * (
поле: 0 0 0 8px;
}

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

В крайна сметка.

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

Като заключение бих искал да представя на вашето внимание проект на писалка, който демонстрира примерите по-горе, както и две правила, проверени от моя собствен опит. И така, използваме:

подплата- за пространствата между контейнера и неговото съдържание.

марж- за празнини между елементите вътре в контейнера.

Преглеждания на публикация: 427

Здравейте, скъпи читатели на сайта на блога. Днес искам да продължа темата за изучаване и да разгледам онези стилови правила, които ви позволяват да задавате отстъпи и граници за Html елементи: рамка, поле и подложка.

Преди това успяхме да проучим доста прости свойства, които контролираха шрифтове (), текст () и изследвахме модела

Да, ние също успяхме да разгледаме принципите на използване във всички подробности (разтегнати в няколко статии). Сега е време да преминем към правилата, които формират основата за изграждане на документи (уеб страници), и ще започнем с блоковия модел (връзката на Html елементите).

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

CSS модел на кутия - padding, margin и border

Трето, могат да се използват проценти. От какво се считат? Оказва се, че от ширината на контейнера(т.е. от областта на съдържанието родителски елемент). Освен това, това се отнася не само за margin-right и left, което би било логично, но за margin-top и bottom, процентите ще бъдат изчислени от ширината (не височината) на контейнера.

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

Е, от само себе си се разбира, че има предварително създадено CSS правило за полета, което в много случаи ви позволява да намалите размера на кода, използван за задаване на необходимите полета. Редът на стойностите в него е строго регламентиран (те се записват чрез интервал) и трябва да съответстват на модела:

Тези. изброяването започва отгоре (отгоре) и продължава по часовниковата стрелкадо края на кръга с десния отстъп (вдясно). Може да изглежда така:

Поле:20px 10px 40px 30px;

И това ще означава, че браузърът трябва да направи отстъп 20 пиксела над нашия блок, 10 пиксела надясно, 40 пиксела долу и 30 пиксела наляво. този запис би бил еквивалентен на:

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

1. Ако лявото и дясното поле са еднакви, например: margin:20px 30px 40px 30px;

   Това последното може да бъде пропуснато:

   Поле:20px 30px 40px;

   Тези два записа на правило за събиране правят едно и също нещо. Следователно, ако видите запис с три стойности в Margin, тогава стойността на четвъртата (вдясно) може да се види във втората (вляво).

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

2. Ако в допълнение към равенството на полетата отляво и отдясно има равенство на техните стойности отгоре и отдолу: margin:20px 30px 20px 30px;

   или, което е същото (по силата на точка 1):

   Поле:20px 30px 20px;

   Че такова сглобяемо правило може да бъде написано само с две стойности, като се отхвърли последната, която съвпада с първата:

   Поле:20px 30px; В този случай първата стойност описва вертикалните полета, а втората описва хоризонталните полета.

3. И накрая, ако всички стойности в предварително зададеното правило са еднакви: margin:20px 20px 20px 20px;

   или, което е същото (по силата на точка 2):

   Поле:20px 20px;

   Това може да се използва най-кратък тип запис(отхвърляне на последната стойност, която съвпада с първата):

   Поле:20px; Какво ще означава един и същ външен отстъп от всички страни на нашия Html елемент.

Говорейки за маржове, заслужава да се спомене такава схема като "маржин-колапс"или, с други думи, „срив на маржа“. Накратко, същността на това явление е следната.

Ако имаме два блока, разположени един под друг (полята могат да се свиват само вертикално) и двата имат противоположни полета (например дъно за горния елемент и горно поле за долния), тогава по-голямата стойност на полето ще поеме по-малка един.

Например, ако горният блок е настроен на:

Поле:20px 20px 200px 20px;

И за дъното:

Поле:100px 20px 20px 20px;

Тогава долното поле на горния блок (200px) ще погълне горното поле на долния (100px, и дори да стане равно на 199px нищо няма да се промени) и резултантният външен отстъп между тези два блока пак ще бъде 200px. Тези. Взема се предвид само по-големият. modulo Margin и не се събира по никакъв начин с противоположната стойност на вертикално съседния елемент.

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

Например в този случай:

Горно поле: 20px 20px -20px 20px; долно поле:10px 20px 20px 20px;

Получената подложка между блоковете ще бъде -10px, т.е. долните 10px ще преминават върху горния Html елемент.

Друга особеност на използването на правилото за марж в CSS е, че определената стойност вертикално за вградени елементи се игнорира. като попитам:

Поле:20px;

Например за , който е вграден елемент, всъщност ще видим само хоризонтална подложка и няма да настъпят вертикални промени.

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

В случай на блоков таг (заглавия, параграфи), вертикално увеличеното Padding би преместило този елемент спрямо други съседни блокове.

Е, рамката (Border), или по-скоро нейната ширина, също няма да може да премества други съседни блокове вертикално от вградения таг. При инлайн елементите движението е възможно само в една посока - хоризонтално и толкова.

Padding and border - подложка и бордюри

Нека сега да преминем към настройката на подложката с помощта на правилото за подложка и да видим какви стойности може да приеме:

Както можете да видите, тук не се споменава Auto, а също и това CSS правило не позволява отрицателни стойности (те могат да бъдат само положителни - от нула и нагоре). Тези. с помощта на Padding съдържанието не може да бъде изтласкано извън рамката. Максимумът, който може да се направи, е съдържанието да се доближи до рамката.

Процентите в него се изчисляват по същия начин, както в Margin - спрямо ширината на контейнера (областта на съдържанието на родителския елемент), в който е затворен нашият елемент. Сглобяемо правило за подложка в Cssсе формира и се подчинява на същите закони, както беше обсъдено по-горе:

Padding:20px 10px 40px 30px;

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

И последното нещо, което бих искал да разгледам днес, е рамката, която се използва Граница. Те имат три вида параметри:

1. Border-width - задава ширината на границата
2. Border-color - задава цвета му
3. Border-style - тип рамка или тип линия, с която ще бъде начертана

И трите от тези CSS правила имат валиден набор от стойности:

Ширина на линията за граница ( border-width) може да се посочи както с помощта на числа в Em, Ex или Px, така и с думите:

1. Thin - тънка линия;
2. Medium - средно (тази стойност се използва по подразбиране);
3. Дебел - дебел.

border-width:2px;

Като стойност за цвета на рамката ( цвят на границата) можете да използвате приетите методи за посочването им (шестнадесетичен код, думи и т.н.):

цвят на границата:червен;

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

1. Няма - без рамка (по подразбиране)
2. Пунктирна - линията се изчертава с точки
3. Прекъснат - пунктиран
4. Solid - плътна линия
5. Двойна - двойна линия
6. Жлеб - вдлъбната рамка
7. Гребен - изпъкнал
8. Вмъкване и начало - игри със сенки

Естествено, тъй като всеки блок има четири страни, той може да се използва като Общи правила, и отделно за всяка от страните:

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

Граница: 1px плътно червено;

Ако нещо е пропуснато, вместо това ще се използва стойността по подразбиране.

Късмет! Ще се видим скоро на сайта на страниците на блога

Може да се интересувате

Височина, ширина и преливане - CSS правила за описание на областта на съдържанието в блоково оформление
Позиция (абсолютна, относителна и фиксирана) - начини за позициониране на Html елементи в CSS (правила за ляво, дясно, горно и долно) Различен дизайн за интериор и външни връзкичрез CSS
Плаване и изчистване в CSS - инструменти за блоково оформление
Display (block, none, inline) в CSS - задайте типа на показване на Html елементи на уеб страница
Стил на списък (тип, изображение, позиция) - Css правила за персонализиране външен видсписъци в html код
Фон в CSS (цвят, позиция, изображение, повторение, прикачен файл) - всичко за задаване на фонов цвят или фонова картина Html елементи
За какво е CSS, как да свържете каскадни таблици със стилове html документи основен синтаксис на този език Как да промените цвета на фона на редовете от таблици, списъци и други Html елементи на сайта с помощта на псевдокласа nth-child
Правила за шрифт (тегло, семейство, размер, стил) и височина на реда за стилизиране на шрифтове в CSS

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

Задача: На страницата нужда от червен блок(200x200 пиксела), което се отдалечава от краищата на браузъраотгоре и отляво съответно с 40 и 70 пиксела и текстът, вътре в който има отстъпи отляво и отгорес 40 пиксела.

Решение: вижте снимката и кода. Нашият червен блок не трябва да надвишава 200 на 200 пиксела и трябва да бъде подплатен от краищата на браузъра (или други блокове със съдържание). Всъщност ние правим тези отстъпи чрез марж. Ако направим подложка, тогава подложката се случва вътре в нашия червен блок и подложката се получава с фона на самия блок (тоест червен).

Освен използваните свойства (редове 6-9) има и свойствата margin-right, padding-right, margin-bottom, padding-bottom - те са съответно за отстъпи отдясно и отдолу. Стойностите на всички тези свойства могат да бъдат в пиксели (px), проценти (%) или в em единици.

По принцип това е. Има обаче някои други характеристики на работата с тях.

Характеристики на полето и подложката

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

Ако зададете margin-left и margin-right с автоматични стойности за някакъв блок, тогава ако блокът има фиксирана ширина (например 400px) и няма свойство float CSS, тогава този блок ще бъде подравнен към центъра на елемента, в който се намира. Всъщност за не-гумено оформление с централно подравняване обикновено се използва този метод на подравняване. Въпреки че IE 5.5 и по-стари версии не поддържат автоматичната стойност, това все още не ви пречи да я използвате през цялото време=).

Не се препоръчва използването на padding и margin в таблици, защото ефектът ще бъде непредвидим в различните браузъри.

И последното нещо, което исках да кажа. Не забравяйте да използвате стенографски пост конструкции като margin: 10px 0 5px 20px;. Ако отстъпът е нула, тогава можете просто да поставите нула, без да посочвате параметри. Много е лесно да запомните кой от параметрите към коя граница принадлежи - за блока отстъпите вървят по посока на часовниковата стрелка: първото число е отгоре, второто е отдясно, третото е отдолу, четвъртото е от наляво.

Всъщност това е всичко, което исках да ви кажа днес. Приятен уикенд на всички!

Това свойство може да има от една до четири стойности.

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

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


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


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


4. Когато посочите една стойност(5px ) - подложката от всички страни ще бъде с еднакъв размер - 5px .

Поддръжка на браузър

Имот			Опера		IExplorer	ръб, край
подплата	1.0	1.0	3.5	1.0	4.0	12.0

CSS синтаксис:

padding: "дължина | първоначално | наследяване";

Синтаксис на JavaScript:

object.style.padding = "5px"

Стойности на имотите

CSS версия

CSS1

Наследени

Не.

Анимиран

да

Пример за употреба

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

подплата

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

Единиците могат да бъдат пиксели (px) или проценти (%).

#блокиране(
подложка: 12px /* подложка от границите на блока до съдържанието - ще има 12 пиксела от всички страни */
}

Възможно е да посочите поле само от една конкретна страна:

подплата отгоре- свойство, което създава полета отгоре.
подплата вдясно- свойство, което създава полета отдясно.
подплънка-отдолу- свойство, което създава долни полета.
padding-left- свойство, което създава полета отляво.

#блокиране(
padding-bottom: 25px /* долно поле 25px */
padding-left: 15px; /* ляво поле 15px */
}

Както забелязахте, ако зададете полета от 2 или 3 страни по този начин, ще получите дълъг код. За това има съкратена нотация за свойството padding. Всички 4 стойности са посочени на свой ред в него - от всеки ръб в една линия, движението върви по посока на часовниковата стрелка, като се започне от върха:

Подложка: Горна подплата отдясно Подложка Долна подложка отляво;

#блокиране(
подложка: 25px 10px 15px 6px; /* горе 25px, дясно 10px, долу 15px, ляво 6px */
}

марж

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

#блокиране(
поле: 4px
}

За да зададете отстъпи само от определени страни, съществуват следните свойства:

margin-top- свойство, което създава отстъпи отгоре.
margin-right- свойство, което създава отстъпи отдясно.
margin-bottom- свойство, което създава отстъпи отдолу.
margin-left- свойство, което създава отстъпи отляво.

Подобно на свойството padding, margin също има способността да съкращава стойности за различни партии. Движението върви по посока на часовниковата стрелка, от горното поле:

Поле: Горно поле, дясно поле, долно поле, ляво поле;

#блокиране(
поле: 15px 10px 5px 25px; /* горе 15px, дясно 10px, долу 5px, ляво 25px */
}

Благодаря за вниманието!