Относителна стойност на запълване. Как да зададете CSS поле и подложка (и страхотни съвети за оформление). Неща, които трябва да запомните

От автора:Когато за първи път започнах да изучавам CSS, постоянно се обърквах относно полетата и подложките. Те изглеждаха много сходни и в някои случаи дадоха същия резултат. В този урок ще видите разликата между CSS полетата и подложките и как тези свойства влияят на пространството между елементите на страницата. Ще обсъдим и свиването на маржове, използването на различни мерни единици при изграждането на адаптивни сайтове. Ще завършим статията с няколко съвета за оформление, използвайки поле и подложка.

блоков модел

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

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

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

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

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

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

Например, нека вземем блок с ширина 200px и височина 200px, подложка от 10px от всички страни и рамка от 2px от всички страни. Браузърът не вижда блока от 200px. Браузърът изчислява хоризонталното пространство, необходимо за показване на блока, и то е 224px: 200(ширина)+2(лява граница)+10(лява подложка)+10(дясна подложка)+2(дясна граница)=224px. Тъй като е квадрат, височината също ще бъде 224px.

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

По подразбиране всички браузъри използват W3C кутия модел. Моделът може да бъде зададен ръчно с помощта на свойството box-sizing. Двете приети стойности са content-box (W3C) и border-box (традиционно). Традиционният модел е по-интуитивен, което го прави най-популярен сред уеб разработчиците.

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

html ( box-sizing: border-box; ) *, *:before, *:after ( box-sizing: inherit; )

html (

кутия - оразмеряване : бордюр - кутия ;

* , * : преди след (

оразмеряване на кутията: наследяване;

Ако помните по-бързо, когато правите нещо сами, тогава опитайте да експериментирате със забавна интерактивна демонстрация от Guy Routledge.

Задаване на полета и подложки

Свойствата padding-top, padding-right, padding-bottom и padding-left контролират подложките от четирите страни на елемент. Можете също да зададете подложка чрез съкратено свойство. Ако е написана една единствена стойност за подложка, CSS я използва, за да определи подложката за всичките 4 страни:

/* всички 4 страни */ padding: 10px;

Ако има 3 стойности, първата е за горната част, втората за ляво и дясно и третата за долната част:

/* отгоре | хоризонтално | отдолу */ подложка: 1em 20px 2em;

Ако всичките 4 стойности са налице, тогава всяка отговаря съответно за горната, дясната, долната и лявата:

/* отгоре | надясно | дъно | ляво */ подложка: 10px 10% 2em 15%;

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

Подложката може да се контролира от всичките 4 страни, точно като подложката, със свойствата margin-top, margin-right, margin-bottom и margin-left. Освен това полето може да бъде зададено за всичките 4 страни наведнъж, като се използва свойството за стенограма.

/* всички 4 страни */ margin: 10px; /* вертикално | хоризонтално */ поле: 2em 4em; /* отгоре | хоризонтално | отдолу */ поле: 2em auto 2em; /* отгоре | надясно | дъно | ляво */ поле: 10px 10% 2em 15%;

Неща, които трябва да запомните

Използвайте правилните мерни единици

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

Да приемем, че сте задали ширина на елемент на 50% и поле от 15px. При ширина 1200px, ширината на елемента ще бъде 600px, а полето все още ще бъде 15px. При ширина 769px, ширината на елемента ще бъде 384px, а полето все още ще бъде 15px.

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

По същия начин може да искате да добавите подложка към текстовите елементи на страницата. В повечето случаи искате подложката да бъде пропорционална на размера на шрифта на елемента. Невъзможно е да се направи това с абсолютни единици. Ако обаче зададете padding на em, то автоматично ще се коригира, за да пасне на размера на шрифта. Демото по-долу показва увеличение в действие.

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

Браузърите изчисляват крайните стойности на margin и padding по различен начин в зависимост от мерните единици.

Полето и подложката, дадени като процент, се изчисляват спрямо ширината на контейнера. Така че подложката от 5% ще бъде 5px, ако контейнерът е широк 100px, или 50px, ако контейнерът е широк 1000px. Не забравяйте, че горната и долната стойност също се изчисляват от ширината на контейнера.

В случая на ems, стойността на margin и padding се основава на размера на шрифта на елемента. В предишната демонстрация подложката на долните три текстови елемента е 1em. Поради различните размери на шрифта, изчислената стойност на подложката винаги ще бъде различна.

Има и 4 единици за прозорци vw, vh, vmin и vmax. В този случай стойностите на полето и подложката ще зависят от прозореца за изглед. Например, подложка 5vw ще бъде 25px на 500px изгледен прозорец, а подложка 10vw ще бъде 50px на същия изгледен прозорец. Можете да научите повече за тези мерни единици в статията на SitePoint „Мерни единици на CSS Viewport: Бърз старт“.

Ако сте нов, знанието как работят тези единици ще ви помогне бързо да разберете защо подложките и полетата на HTML елементите се променят в зависимост от размера на родителя, шрифта или дори прозореца за изглед. И това ще ви даде възможност да контролирате оформлението си.

Свиващи се полета

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

Да кажем, че имате два елемента един под друг, т.е. на същото ниво. Ако зададете margin-bottom на 40px на първия елемент и 25px на втория елемент, тогава общото поле между елементите няма да бъде равно на 65px. Отстъпът ще бъде равен на стойността на по-голямото поле, т.е. 40px.

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

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

В случай на отрицателни маржове крайната стойност на свития марж е сумата от положителния марж плюс най-малкия отрицателен марж. Можете да научите повече за свиването на маржове в Свиване на маржове от Адам Робъртс.

Интересни начини за използване на поле и подложка

Понякога използването на полета и подложки може да реши проблеми с оформлението. Няколко примера са описани по-долу:

Поддържайте пропорциите на изображенията

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

За да направите това, трябва да зададете височината на родителя на нула, а свойството padding-top на родителя трябва да е равно на стойността на съотношението на страните, изразено като процент.

Например съотношение 16:9 се постига чрез подплата: 56,25% 0 0 0. Стойността 56,25 се получава чрез (9/16)*100. С този метод можете да изчислите процентите на запълване за всяко друго съотношение.

Заключение

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

Описание

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

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

Синтаксис

подложка: [стойност | процент] (1, 4) | наследяват

Стойности

Разрешено е използването на една, две, три или четири стойности, като ги разделяте с интервал. Ефектът зависи от броя на стойностите и е даден в табл. един.

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

HTML5 CSS2.1 IE Cr Op Sa Fx

подплата

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Ориз. 2. Прилагане на свойството padding

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

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

Браузъри

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

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

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

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

Както можете да видите, 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 стойност: задайте една и съща подложка за всички страни на елемента: подложка: 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 единици, те се намаляват до една, след което се сравняват и се избира по-голямата стойност.
Размерът на маржа за дъщерните елементи е още по-интересен: ако детето има по-голям марж от родителя, тогава му се дава приоритет. В този случай размерите на горното и долното поле на родителя ще станат същите като зададените за детето. В този случай няма да има дистанция между родителя и детето.

Описание

Синтаксис

подложка: [стойност | процент] (1, 4) | наследяват

Стойности

HTML5 CSS2.1 IE Cr Op Sa Fx

подплата

Резултатът от този пример е показан на фиг. 2.

Ориз. 2. Прилагане на свойството padding

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

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

Браузъри

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

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

подплата

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

Единиците могат да бъдат пиксели (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 */
}

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