В padding
имота в CSS определя най-вътрешната част на модел кутия, създаване на пространство около съдържание на елемента, в рамките на някакви определени граници и / или граници.
Стойностите за подплата се задават с дължини или проценти и не могат да приемат отрицателни стойности. Първоначалната стойност по подразбиране за всички свойства на подложката е 0
.
Ето един прост пример:
.box ( padding: 0 1.5em 0 1.5em; )
Примерът по-горе използва padding
стенографското свойство, което приема до четири стойности, показани тук:
.box ( padding: || || || )
Ако са зададени по-малко от четири стойности, липсващите стойности се приемат въз основа на дефинираните. Например следните два набора от правила ще получат идентични резултати:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )
По този начин, ако е дефинирана само една стойност, това задава и четирите свойства за подплата на една и съща стойност:
.box ( padding: 20px; )
Ако са декларирани три стойности, това е така padding: (top) (left-and-right) (bottom);
.
Всяко от отделните свойства на подложката може да бъде декларирано с помощта на longhand, като в този случай бихте определили само една стойност за свойство. Така че предишният пример може да бъде пренаписан, както следва:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )
Изчисления за подплата и ширина на елемента
Ако елементът има определена ширина, всяко добавяне към този елемент ще добави към общата ширина на елемента. Това често е нежелан резултат, тъй като изисква ширината на даден елемент да бъде преизчислена всеки път, когато подложката се коригира. (Обърнете внимание, че това се случва и с височина, но в повечето случаи се предпочита да не се дава елемент на зададена височина.)
Например:
.box ( padding: 20px; width: 400px; )
В този пример, въпреки че на .box
елемента е дадена изрична ширина 400px, действителната ширина на елемента на страницата ще бъде 440px. Това отчита не само ширината от 400px, но и 20px от лявата подплата и 20px от дясната подложка (дефинирана със стенография за подплънки в предишния пример).
Това се случва, за да се поддържа 400px пространство за съдържание, а не 400px обща ширина на елемента. Ето писалка, демонстрираща това:
Вижте тази писалка!
Това се случва във всички използвани браузъри в стандартен режим, но няма да се случи в IE6 и IE7 в режим на странности (т.е. на страници, показани в IE6 или IE7, където няма деклариран тип доктрип или където нещо друго се случва, за да задейства странности режим).
За да разрешите този проблем, като по този начин поддържате ширината на 400px, независимо от количеството подложка, можете да използвате box-sizing
свойството:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )
Това кара елемента да поддържа ширината си, като същевременно увеличава подложката, като по този начин намалява наличното пространство за съдържание. Ето демонстрация:
Вижте тази писалка!
Поддръжка на браузър
Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
Да | Да | Да | Да | Да | Да | Да |