Днес ще работим върху разбирането на разликата между HTML padding ( подплата) и margin (марж) в CSS. Но първо, нека разберем синтаксиса им. Има няколко начина за записване на тези свойства: обикновен и съкратен:
Padding и Margin в CSS
Обичайната форма на нотация за въпросните свойства е по-лесна за разбиране, защото е подобна на всички други стилови нотации:
Редовен запис:
подложка-отгоре: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;
От друга страна, CSS стенографията комбинира всички тези свойства в едно обща собственост « подплата«.
Кратко вписване:
подложка: 10px 20px 40px 10px;
Padding и margin имат четири стойности: отгоре, отдясно, отдолу и отляво. Показаната по-горе стенографска нотация също определя четири стойности, разделени с интервал. Първата от четирите стойности е горен отстъп, след това десен отстъп, долен ( подложка в долния HTML) и вляво:
подложка: ГОРЕ ДЯСНО ДОЛНО ЛЯВО; (подложка: горе вдясно долу вляво)
Този запис може да бъде намален до три стойности, ако лявото и дясното поле/поле са еднакви. Например, ако горното поле е 30px, лявото и дясното са 10px, а долното е 40px, тогава можете да използвате следната нотация:
подложка: 30px 10px 40px;
Намаляваме го до две стойности!
Ако горната и долната подложка/поле са еднакви, а дясното и лявото поле/поле също са еднакви, тогава могат да бъдат посочени само две стойности. В този пример имаме горна и долна подложка от 10px и лява и дясна подложка от 20px. Нашият CSS ще изглежда така:
подложка: ГОРЕ/ДОЛУ ДЯСНО/ЛЯВО; (подложка: горе/долу вдясно/ляво) подложка: 10px 20px;
Само едно значение!
Нашите последна версиястенограма за подложка и поле HTML съдържа само една стойност. Тази нотация може да се използва, когато всички отстъпи ( отгоре, отдолу, отдясно и отляво) имат същото значение. Ако искахме всички страни да имат 20px подложка, CSS ще изглежда така:
Кога да използвате какъв формат на запис? Например, ако трябва само да дам на елемент долно поле, бих използвал редовно влизане, тъй като трябва да приложите свойството само към едната страна: padding-bottom: 30px ;
Как се работи с PADDING и MARGIN
Има забележима разлика между тези два свойства. Padding се използва за определяне на пространство в контейнера на HTML елемент. Полето се използва за определяне на пространството около външната граница на елементите.
Представете си подплата, която ви облича със зимно палто. Палтото е част от теб, но ако те хвърля с боя, тя ще покрие по-широка повърхност, отколкото ако не носиш това палто.
Можете също да мислите за пълнеж като пълнеж в картонена кутия. Когато напълните кутия с пяна, вие я използвате, за да държите съдържанието далеч от краищата на кутията. Padding в CSS прави същото нещо.
Сега помислете за маржа като за невидимо силово поле около вас. Силовото поле държи други неща далеч от вас. Връщайки се към примера с палтото и боята, ако хвърлям боя върху вас и тя успее да премине през силовото поле, тогава пак ще покрие само вас и палтото ви.
PADDING и MARGIN на примера на сайт
Нека да разгледаме свойствата, използвайки примери с елементи. Ще започнем с абзац (таг
), след това добавете фонов цвят към него и добавете 30px подложка от всяка страна.
Долу вляво можете да видите, че това е абзац с 30px подложка около него. На изображението вдясно, което използвах Инструменти на Google Chrome, за да покаже къде започва/завършва HTML подложката за този елемент. Зелен цвятна изображението по-долу е подложката, която е поставена около контейнера. Тъмносиният цвят на фона запълва вътрешната област:
Сега нека добавим поле към абзаца. Ще добавя 30px горна и долна подложка, както и 20px ляво и дясно. Изображението по-долу вляво показва как този параграф се е променил от полето. Действителната ширина на изображението е по-малка, защото полето избутва друг HTML елемент от границата. Вдясно можете да видите, че оранжевият цвят е полето около елемента. полето винаги е извън подложката и тъмносиният фон не се простира в полето:
Ако все още сте объркани как да използвате HTML с подложки и полета, тогава е време да експериментирате! Колкото повече използвате CSS свойства и променяте техните стойности, толкова по-добре ще разберете как работят.
Превод на статията “ CSS PADDING VS. МАРЖИНИ И КАК ДА ГИ ИЗПОЛЗВАТЕ” е подготвен от приятелския екип на проекта.
Добро Лошо
Този урок ще ви помогне да разберете по-добре свойствата на CSS като граница, подложка и поле. Тези свойства значително помагат на разработчиците да позиционират елементите на страницата според оформлението.
Нека създадем div и го присвоим маржин свойства, подложка и граница.
Свойство за подложка
CSS свойството padding указва разстоянието между границата на елемент и неговото съдържание. Можете да го дефинирате така:
- подложка-отгоре: 10px;
- padding-right: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
Този запис може да бъде съкратен:
- подложка: 25px 50px 75px 100px;
- горни 25px
- дясно 50px
- отдолу 75px
- ляво 100px
- padding:25px 50px 75px;
- горни 25px
- дясно и ляво 50px
- отдолу 75px
- padding:25px 50px;
- отгоре и отдолу 25px
- дясно и ляво 50px
- padding:25px;
- всички 25px
Забележка: Стойността на подложката се добавя към ширината на елемента и зависи от фона на елемента.
С други думи, имаме div елементс клас div-1:
Div.div-1(ширина:150px; подложка: 25px;)
Браузърът ще добави лява и дясна подложка към ширината на елемента. В резултат на това ще получим елемент с ширина 200px.
Граничен имот
CSS граничен имотви позволява да определите стила и цвета на рамката на елемент.
border-width
Свойството border-width се използва за определяне на ширината на границата. Ширината се посочва в пиксели или с помощта на една от предварително зададените стойности: тънка, средна или дебела.
цвят на границата
Свойството border-color се използва за определяне на цвета на рамката. Цветът може да бъде зададен по следните начини:
- име - името на цвета, например „червено“
- RGB - дефинира RGB стойността, например "rgb(255,0,0)"
- Hex - дефинира шестнадесетична стойност, например "#ff0000"
граничен стил
- пунктиран: Определя точна граница
- пунктирана: Определя пунктирана рамка
- твърдо: Определя дебела рамка
- двойно: Определя две граници. Разстоянието между тях зависи от стойността на ширината на границата
- бразда: Дефинира 3D вдлъбната граница
- хребет: Дефинира 3D изпъкнала граница
- вмъкване: Определя границата, така че блокът да се клати при натискане
- начало: Определя граница, така че блокът да се търкаля изпъкнал
Можете да напишете свойствата на границата на елемента по стенописен начин:
Div.div-2( border:1px solid #ccc; )
Маржин собственост
Свойството марж на CSS указва количеството пространство около даден елемент. Margin изчиства пространството около елемента (извън границата). Полето няма фонов цвят и винаги остава прозрачно.
Можете да дефинирате марж стойности за елемент като този:
- margin-top:100px;
- margin-bottom:100px;
- margin-right:50px;
- margin-left:50px;
Този запис може да бъде съкратен:
- margin:25px 50px 75px 100px;
- горно поле 25px
- дясно поле 50px
- долно поле 75px
- ляво поле 100px
- margin:25px 50px 75px;
- горно поле 25px
- дясно и ляво поле 50px
- долно поле 75px
- margin:25px 50px;
- горно и долно поле 25px
- дясно и ляво поле 50px
- margin:25px;
- и четирите полета са 25px
Използвайки стойностите на полето по подразбиране, можете да центрирате блока хоризонтално.
В предишната глава споменахме такива CSS свойства, като поле (поле) и подложка (отстъп). Сега ще ги разгледаме по-подробно и ще разгледаме как се различават един от друг и какви характеристики имат.
Можете да създавате интервали между елементите по един или друг начин, но ако padding е отстъпът от съдържанието до ръба на блока, тогава margin е разстоянието от един блок до друг, междублоковото пространство. Екранната снимка показва ясен пример:
Подложката отделя съдържанието от границата на блока, а полето създава празнини между блоковете
Както можете да видите, полетата и CSS подложкасе различават един от друг, въпреки че понякога без разглеждане на кода е невъзможно да се определи кое свойство се използва за задаване на разстоянието. Това се случва в случаите, когато рамката или фонът на блока със съдържание липсват.
Съществуват следните свойства за задаване на поле или подложка в CSS от всяка страна на елемент:
Подплата:
- подложка-отгоре: значение;
- padding-right: значение;
- padding-bottom: значение;
- padding-left: значение;
Полета:
- марж-отгоре: значение;
- margin-right: значение;
- марж-отдолу: значение;
- поле-ляво: значение;
Стойностите могат да бъдат посочени във всеки CSS единици– px, em, % и т.н. Пример: margin-top: 15px.
Има и много удобно нещо като стенограма за CSS за марж и подложка. Ако трябва да зададете полета или подложки от четирите страни на елемент, не е нужно да пишете свойството за всяка страна поотделно. Всичко е по-просто: за марж и подложка можете да посочите 1, 2, 3 или 4 стойности наведнъж. Броят на стойностите определя как се разпределят настройките:
- 4 стойности: подложка се задава за всички страни на елемента в следната последователност: отгоре, отдясно, отдолу, отляво: подложка: 2px 4px 5px 10px;
- 3 стойности: подложката се задава първо за горната страна, след това едновременно за лявата и дясната страна и след това за долната: подложка: 3px 6px 9px;
- 2 стойности: подложката се задава първо едновременно от горната и долната страна, а след това едновременно отляво и отдясно: подложка: 6px 12px;
- 1 стойност: зададена равни вдлъбнатиниза всички страни на елемента: padding: 3px;
Същите правила важат за свойството CSS margin. Моля, обърнете внимание, че можете също да използвате отрицателни стойности за марж (например -3px), което понякога може да бъде доста полезно.
Свиване на полето
Представете си ситуацията: две блоков елементса разположени един върху друг и им се дават марж полета. Горният блок е зададен на margin: 60px, а долният блок е зададен на margin: 30px. Би било логично да се предположи, че двете гранични полета на два елемента просто ще се докоснат и в резултат на това разстоянието между блоковете ще бъде равно на 90 пиксела.
Нещата обаче са различни. Всъщност в такава ситуация се получава ефект, който се нарича колапс, когато от две съседни полета от елементи се избира най-големият по размер. В нашия пример крайното разстояние между елементите ще бъде 60 пиксела.
Разстоянието между блоковете е равно на по-голямата от стойностите Свиването на полето работи само за горното и долното поле на елементите и не се прилага за полетата от дясната и лявата страна. Крайната стойност на празнината се изчислява в различни ситуацииразлично:
- Когато и двете стойности на маржа са положителни, полученият размер на маржа ще бъде равен на по-голямата стойност.
- Ако една от стойностите е отрицателна, тогава за да изчислите размера на полето, трябва да получите сумата от стойностите. Например, със стойности от 20px и -18px размерът на полето ще бъде равен на:
20 + (-18) = 20 – 18 = 2 пиксела. - Ако и двете стойности са отрицателни, модулите на тези числа се сравняват и се избира числото с по-голям модул (следователно по-малкото от двете). отрицателни числа). Пример: трябва да сравните стойностите на полетата -6px и -8px. Модулите на сравняваните числа са съответно 6 и 8. От това следва, че 6 -8. Полученият размер на полето е -8 пиксела.
- В случай, че стойностите са посочени в различни единици CSS се свеждат до единица, след което се сравняват и се избира по-голямата стойност.
- Размерът на маржа за дъщерните елементи се определя по още по-интересен начин: ако дъщерният марж има по-голям марж от своя родител, тогава му се дава приоритет. В този случай размерите на горното и долното поле на родителя ще бъдат същите като тези, посочени за детето. В този случай няма да има дистанция между родител и дете.
Докато се лутах из форумите се натъкнах на факта, че все още възниква въпросът какво прави подплата, И какво марж, и какви са разликите между тях. Ето защо реших да ви го припомня. Така че, без да прибягвате до неясни фразиНека да поставим проблема и да разгледаме пример, в който всичко ще стане ясно.
Задача: На страницата Имам нужда от червен блок(200x200 пиксела), което се отдалечава от краищата на браузъраотгоре и отляво съответно с 40 и 70 пиксела и текстът вътре в който е с отстъп отляво и отгорес 40 пиксела.
Решение: вижте снимката и кода. Нашият червен блок не трябва да надвишава 200 на 200 пиксела и трябва да е отстъп от краищата на браузъра (или други блокове със съдържание). Всъщност ние правим тези отстъпи чрез марж. Ако направим подложка, тогава вдлъбнатината се появява вътре в нашия червен блок и вдлъбнатината се получава с фона на самия блок (тоест червен).
200?"200px":""+(this.scrollHeight+5)+"px");">
текст, текст, много текст, много текст текст
Освен използваните свойства (редове 6-9), има и свойства margin-right, padding-right, margin-bottom, padding-bottom - те са за отстъп съответно отдясно и отдолу. Стойностите за всички тези свойства могат да бъдат в пиксели (px), проценти (%) или em единици.
По принцип това е всичко. Въпреки това, все още има някои характеристики на работата с тях.
Характеристики на полето и подложката
И последното нещо, което исках да кажа. Не забравяйте да използвате конструкции за стенографско обозначение, като margin: 10px 0 5px 20px;. Ако отстъпът е нула, тогава можете просто да поставите нула, без да посочвате параметрите. Много е лесно да запомните кой от параметрите към коя граница се отнася - за блок отстъпите вървят по посока на часовниковата стрелка: първото число е отгоре, второто е отдясно, третото е отдолу, четвъртото е от наляво.
Всъщност това е всичко, което исках да ви кажа днес. Приятен уикенд на всички!
+
В тази тема можете да зададете въпрос относно материала.
Здравейте, скъпи читатели на сайта на блога. Днес искам да продължа темата за изучаване и да разгледам тези стилови правила, които ви позволяват да задавате отстъпи и граници за HTML елементи: рамка, поле и подложка.
Преди това успяхме да проучим доста прости свойства, които контролираха шрифтове (), текст () и разгледахме модела
Да, ние също успяхме да разгледаме принципите на използване в детайли (простиращи се в няколко статии). Сега е време да преминем към правилата, които формират основата за конструиране на документи (уеб страници), и ще започнем с блоковия модел (връзката на Html елементи).
IN общ контурВече писах за съвременните, но днес ще навлезем в чиста конкретика. Ако искате да разгледате предишни публикациипо темата, тогава сте добре дошли в .
Модел на кутия в CSS - padding, margin и border
Трето, може да се използва лихва. От какво се броят? Оказва се, че от ширината на контейнера(т.е. от областта на съдържанието на родителския елемент). Освен това това важи не само за margin-right и left, което би било логично, но и за margin-top и bottom процентите ще се изчисляват точно от ширината (а не от височината) на контейнера.
Трябва да се отбележи, когато говорим за настройка на размерни стойности, че Margin може да бъде и отрицателен. Тези. когато зададем положителна стойност за външното поле, преместваме съседния елемент на определеното разстояние и ако зададем отрицателна стойност, съседният блок просто ще припокрие този, за който сме задали този отрицателен отстъп. И това се използва много често в CSS.
Е, от само себе си се разбира, че има предварително изработено правило за CSS маржове, което в много случаи ви позволява да намалите размера на кода, използван за задаване на необходимите външни маржове. Редът на стойностите в него е строго регламентиран (те се записват чрез космически характер) и трябва да съответства на примера:
Тези. изброяването започва отгоре и продължава по часовниковата стрелкадокато кръгът бъде завършен с дясната вдлъбнатина (вдясно). Може да изглежда така:
Поле:20px 10px 40px 30px;
И това ще означава, че браузърът над нашия блок трябва да направи отстъп с 20 пиксела, отдясно - 10, отдолу - 40, а отляво - 30. Т.е. този запис би бил еквивалентен на:
Намаляването на CSS кода се вижда с просто око. Но това не е границата. Напълно приемливо е да използвате не само четири, но и три, две и дори само една стойност в предварително създадено правило. Което допълнително ще помогне за намаляване на размера на кода. Въпреки това ще бъде възможно да се намали броят на стойностите само в определени случаи:
- Ако полетата отляво и отдясно са еднакви, например така: margin:20px 30px 40px 30px;
Това последното може да бъде пропуснато:
Поле:20px 30px 40px;
Тези два записа на сглобяеми правила правят едно и също нещо. Следователно, ако видите запис с три стойности в Margin, тогава стойността на четвъртата (вдясно) може да се види във втората (вляво).
Ако вдлъбнатините отгоре и отдолу са равни, такъв трик вече няма да работи, защото логично е възможно да се намали структурата на записа на предварително създадено правило, само отрязване на дублиращи се стойности от края му(и стойността на долния отстъп ще бъде предпоследна).
- Ако в допълнение към равенството на външните полета отляво и отдясно има равенство на техните стойности отгоре и отдолу: margin:20px 30px 20px 30px;
или, което е същото (поради точка 1):
Поле:20px 30px 20px;
Тогава такова предварително изработено правило може да се напише само с две стойности, като се отхвърли последната, която съвпада с първата:
Поле:20px 30px; В този случай първата стойност описва външните полета вертикално, а втората - хоризонтално.
- И накрая, ако всички стойности в prefab правилото са еднакви: margin:20px 20px 20px 20px;
или, което е същото (поради точка 2):
Поле:20px 20px;
Това може да се използва максимално съкратен тип запис(отхвърляне на последната стойност, която съвпада с първата):
Поле:20px; Което ще означава едно и също поле от всички страни на нашия Html елемент.
Говорейки за външни маржове, заслужава да се спомене такава схема като "Свиване на полето"или, с други думи, „срив на маржа“. Накратко, същността на това явление е следната.
Ако имаме два блока, разположени един под друг (свиването на полета може да се случи само вертикално) и на двата са дадени противоположни полета (например долно за горния елемент и горно поле за долния), тогава по-голямата стойност на полето ще поеме по-малката.
Например, ако горният блок е настроен на:
Поле:20px 20px 200px 20px;
А за долния:
Поле:100px 20px 20px 20px;
Тогава долното поле на горния блок (200px) ще поеме горното поле на долния (100px и дори да стане равно на 199px, нищо няма да се промени) и резултантното външно поле между тези два блока пак ще бъде равно на 200 пиксела. Тези. взема се предвид само по-големият modulo Margin и не се събира по никакъв начин със стойността на брояча на вертикално съседния елемент.
Това е уловка, която работи изключително вертикално, а хоризонтално, противоположните размери на маржа просто ще бъдат добавени един към друг. Но това важи само за полета със същия знак, но ако са със различни знаци, тогава техните числа просто ще се сумират и блоковете ще бъдат разделени един от друг с получената стойност.
Например в този случай:
Горно поле: 20px 20px -20px 20px; Долно поле: 10px 20px 20px 20px;
Полученият марж между блоковете ще бъде -10px, т.е. долният ще припокрива горния Html елемент с 10px.
Друга особеност на използването на правилото за марж в CSS е, че определената стойност вертикално за вградени елементиигнориран. като попитам:
Поле:20px;
Например за , който е вграден елемент, всъщност ще видим само хоризонтална подложка и няма да настъпят промени вертикално.
Гледайки малко напред, ще кажа, че Padding vertically for line tags ще работи, но увеличеното вътрешно padding няма да го повлияе по никакъв начин обща ситуацияспрямо други съседни елементи.
В случай на блоков етикет (заглавия, абзаци), увеличаването на вертикалната подложка би преместило този елемент спрямо други съседни блокове.
Е, рамката (граница), или по-скоро нейната ширина, също няма да може да премести други съседни блокове вертикално далеч от маркера на линията. За вградените елементи движението е възможно само в една посока - хоризонтално и толкова.
Подплата и бордюр - вътрешни подложки и рамки
Нека сега да преминем към задаване на подложка с помощта на правилото за подложка и да видим точно какви стойности може да приеме:
Както можете да видите, не се споменава Auto, а също така това CSS правило не позволява използването на отрицателни стойности(те могат да бъдат само положителни - от нула и нагоре). Тези. Няма начин да избутате съдържание извън рамката с помощта на Padding. Максимумът, който може да се направи, е съдържанието да се доближи много до рамката.
Процентите в него се изчисляват по същия начин както в Margin – спрямо ширината на контейнера (областта на съдържанието на родителския елемент), в който е затворен нашият елемент. Композитно правило за подложка в Cssсе формира и се подчинява на същите закони, както беше обсъдено по-горе:
Padding:20px 10px 40px 30px;
В това правило, започвайки отгоре, ние описваме всичките четири страни. Ако трябва да намалите нещо в него (до три, две или дори една стойност), тогава ще трябва да използвате принципите за намаляване, описани малко по-горе за външните отстъпи, които ще работят със същия успех за вътрешните.
И последното нещо, което днес бих искал да разгледам, е рамката, която се използва Граница. Те имат три вида параметри:
- Border-width — задава дебелината на границата
- Border-color — задава цвета му
- Border-style - вида на рамката или вида на линията, с която ще бъде изчертана
И трите от тези CSS правила имат валиден набор от стойности:
Ширина на линията за рамка ( Ширина на границата) може да се посочи или с помощта на числа в Em, Ex или Px, или с думи:
- Thin - тънка линия;
- Средно - средно ( дадена стойностсе използва по подразбиране);
- Дебел - дебел.
Като стойност за цвета на рамката ( Цвят на границата) можете да използвате приетите методи за посочването им ( шестнадесетичен код, думи и т.н.):
Цвят на рамката: червен;
По подразбиране, ако цветът на границата не е изрично указан, ще се използва този, използван за шрифта вътре в елемента.
CSS свойството Border-style ви позволява да укажете типа граница с думи:
- Няма - без рамка (по подразбиране)
- Пунктирна - линията се изчертава с точки
- Прекъсната - пунктирана линия
- Solid - плътна линия
- Двойна - двойна линия
- Жлеб - вдлъбната рамка
- Бит - изпъкнал
- Вмъкване и начало - игри със сенки
Естествено, тъй като всеки блок има четири страни, той може да се използва като Общи правилаи отделно за всяка страна:
Същото ще важи и за сглобяеми гранични правила— може да се посочи както за всички страни едновременно (Граница), така и за всяка страна поотделно (Граница-отгоре, отляво, отдолу и отдясно). Редът на стойностите не е важен:
Граница: 1px плътно червено;
Ако пропуснете нещо, вместо това ще се използва стойността по подразбиране.
Късмет! Ще се видим скоро на страниците на сайта на блога
Можете да гледате още видеоклипове, като отидете на");">
Може да се интересувате
Височина, ширина и преливник - CSS правилаза описание на област със съдържание в блоково оформление 
Позиция (абсолютна, относителна и фиксирана) - методи Html позициониранеелементи в CSS (ляво, дясно, горно и долно правило) Различни дизайниза вътрешни и външни връзкичрез CSS 
Float и clear в CSS - инструменти блоково оформление
Display (block, none, inline) в CSS - задайте типа HTML дисплейелементи на уеб страница
