A paddingCSS tulajdonság meghatározza a dobozmodell legbelső részét, teret teremtve az elem tartalma körül, a meghatározott margók és / vagy szegélyek belsejében.
A kitöltési értékeket hosszak vagy százalékok alapján állítják be, és nem fogadják el a negatív értékeket. Az összes kitöltési tulajdonság kezdeti vagy alapértelmezett értéke 0.
Íme egy egyszerű példa:
.box ( padding: 0 1.5em 0 1.5em; )A fenti példa a paddingrövidítés tulajdonságot használja, amely legfeljebb négy, itt bemutatott értéket fogad el:
.box ( padding: || || || )Ha négynél kevesebb érték van beállítva, akkor a hiányzó értékeket a meghatározottak alapján feltételezzük. Például a következő két szabálykészlet azonos eredményeket hozna:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Így, ha csak egy érték van megadva, ez mind a négy kitöltési tulajdonságot azonos értékre állítja:
.box ( padding: 20px; )Ha három értéket deklarálunk, akkor az padding: (top) (left-and-right) (bottom);.
Az egyedi kitöltési tulajdonságok bármelyike deklarálható hosszúkéz használatával, ebben az esetben tulajdonságonként csak egy értéket határoz meg. Tehát az előző példa a következőképpen írható át:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Párnázás és elemszélesség-számítások
Ha egy elemnek meghatározott szélessége van, akkor az adott elemhez hozzáadott betét hozzáadódik az elem teljes szélességéhez. Ez gyakran nemkívánatos eredmény, mivel megköveteli, hogy minden elem újraszámolja az elem szélességét a párnázás beállításakor. (Ne feledje, hogy ez a magassággal is megtörténik, de a legtöbb esetben nem ajánlott egy elemnek beállított magasságot adni.)
Például:
.box ( padding: 20px; width: 400px; )Ebben a példában, bár az .boxelem kifejezetten 400 képpontos szélességet kap, az elem tényleges renderelt szélessége az oldalon 440 képpont lesz. Ez nem csak a 400 képpontos szélességet veszi figyelembe, hanem a bal párnázás 20 képpontos és a jobb oldali párnázás 20 képpontos értékét is (az előző példában párnázási rövidítéssel definiálva).
Ez azért történik, hogy a teljes elemszélesség 400 képpontja helyett 400 képpontnyi tartalmi terület maradjon fenn. Itt van egy toll, amely ezt demonstrálja:
Ez minden használatban lévő böngészőben, szabványos módban előfordul, de nem fordul elő IE6 és IE7 esetén quirks módban (vagyis az IE6 vagy IE7 fájlokban megjelenített oldalakon, ahol nincs deklarálva a doctype, vagy ha valami más történik a furcsaságok kiváltásához) mód).
A probléma megoldásához, így a szélesség 400 képpontos értéken tartása a kitöltéstől függetlenül, használhatja a box-sizingtulajdonságot:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Ez arra készteti az elemet, hogy megtartsa a szélességét, miközben növeli a párnázottságot, ezáltal csökken a rendelkezésre álló tartalomtér. Itt van egy bemutató:
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Igen | Igen | Igen | Igen | Igen | Igen | Igen |