A CSS párnázás a CSS doboz modell. Ez a rövidített tulajdonság a HTML elem mind a négy oldala körüli kitöltést állítja be. A CSS párnázás szinte mindenre alkalmazható HTML címke (kivéve néhány tábla címkét). Ezenkívül az elem mind a négy oldala eltérő értékű lehet.
CSS Padding Property
A rövidített CSS kitöltési tulajdonság használatához használhatja a mnemikus „TRouBLe” -t (vagy a „TRiBbLe” -t a Star Trek rajongói számára). Ez áll tetejére, jobb, alsó, és bal, és utal a gyorsírás tulajdonságban megadott párnázási szélességek sorrendjére. Például:
párnázás: jobb felső bal alsó;
párnázás: 1px 2px 3px 6px;
Ha a fent felsorolt értékeket használná, akkor más kitöltési értéket alkalmazna bármely HTML elem minden oldalára, amelyre alkalmazza. Ha ugyanazt a párnázatot szeretné alkalmazni mind a négy oldalra, akkor egyszerűsítheti a CSS és csak írj egy értéket:
párnázás: 12px;
Ezzel a CSS vonallal 12 pixel kitöltést kell alkalmazni az elem mind a 4 oldalára.
Ha azt szeretné, hogy a párnázat azonos legyen a felső és az alsó, valamint a bal és a jobb oldalon, akkor két értéket írhat:
párnázás: 24px 48px;
Az első érték (24 képpont) a felső és az alsó, míg a második a bal és a jobb oldalra vonatkozik.
Ha három értéket ír, akkor a vízszintes párnázás (bal és jobb) megegyezik, miközben megváltoztatja a felső és az alsó részt:
párnázás: jobb felső és bal alsó;
párnázás: 0px 1px 3px;
A CSS dobozmodell szerint a kitöltés a legközelebb áll magához az elemhez / tartalomhoz. Ez azt jelenti, hogy a betét hozzáadódik egy elemhez a tartalom szélessége vagy magassága és az Ön által használt határértékek között. Ha a kitöltést nullára állítjuk, akkor annak ugyanaz az éle van, mint a tartalomnak.
CSS kitöltési értékek
A CSS kitöltése bármilyen nem negatív hosszúsági értéket vehet fel. Feltétlenül adja meg a mérést, például px vagy em. Megadhatja a kitöltés százalékát is, amely az elemet tartalmazó blokk szélességének százaléka lesz. Ez magában foglalja a felső és az alsó párnázást. Például:
#container {width: 800px; magasság: 200px; }
# konténer p {szélesség: 400px; magasság: 75%; párnázás: 25% 0; }
A magasság bekezdésében található bekezdés #tartály elem a #tartályMagassága plusz a szélesség 25% -a a felső párnázáshoz és a szélesség 25% -a az alsó párnázáshoz. Ez összesen 300 + 200 + 200 = 700px.
A CSS Padding hozzáadásának hatásai
Tovább blokkszintű elemek, a párnázást a négy oldalon alkalmazzák. Mivel az elem már egy blokk vagy doboz, a párnázást a doboz oldalaira alkalmazzák.
Amikor hozzáadódik a CSS kitöltés inline elemek, előfordulhat, hogy az elemek a fedélzeti elem felett és alatt átfedik egymást, ha a függőleges párnázás meghaladja a vonal magasságát, de ez nem nyomja le a vonal magasságát. Az inline elemekre alkalmazott vízszintes CSS párnázatot hozzáadjuk az elem elejéhez és az elem végéhez. És a párnázás vonalakkal boríthat. De ez nem vonatkozik a többsoros elem összes sorára, ezért nem használhatja a kitöltést a többsoros soros tartalom szegmensének behúzására.
Ezenkívül a CSS2.1-ben nem hozható létre olyan konténerblokk, ahol a szélesség egy elemtől függ, amelynek százalékos a szélessége (vagy kitöltési szélessége). Ha mégis megteszi, az eredmény nincs meghatározva. A böngészők továbbra is megjelenítik a tartalmat, de előfordulhat, hogy nem kapja meg a várt eredményeket. Ha belegondol, van értelme, mintha a tároló elemének ismernie kellene gyermekeinek szélességét a szélességének meghatározásához - például Ha nincs előre meghatározott szélessége, és egy vagy több szélessége a tároló elem százalékában van megadva, akkor ez egy kör alakú láncot állít fel válasz. Ha százalékokat használ a dokumentum bármely részének szélességéhez, akkor győződjön meg arról, hogy a szülő elem szélességei is meg vannak határozva.