Mbushja CSS është një nga vetitë e modelit të kutisë CSS . Ky prerje stenografike përcakton mbushjen rreth të katër anëve të një elementi HTML. CSS mbushje mund të aplikohet në pothuajse çdo tag HTML (përveç disa prej etiketave të tabelës). Përveç kësaj, të katër anët e elementit mund të kenë një vlerë të ndryshme.
CSS Padding Property
Për të përdorur pronën e mbushjes së stenografisë CSS, mund të përdorni "TRouBLe" (ose "TRiBbLe" për ju tifozët e Star Trek). Kjo qëndron për pjesën e sipërme , të djathtë , të poshtme dhe të majtë dhe i referohet renditjes së gjerësisë mbushëse që vendosni në pronësinë e stenografisë. Për shembull:
mbushje: majtas në krye të djathtë; mbushje: 1px 2px 3px 6px;Nëse përdorni vlerat e renditura më lart, do të aplikohet një vlerë e ndryshme mbushjeje në çdo anë të cilitdo element HTML në të cilin po aplikoni. Nëse dëshironi të aplikoni të njëjtën mbushje në të katër anët, mund të thjeshtoni CSS tuaj dhe thjesht shkruani një vlerë:
mbushje: 12px;Me atë rresht të CSS, 12 piksele mbushjeje do të vlejnë për të gjitha 4 anët e elementit.
Nëse doni që mbushja të jetë e njëjtë për pjesën e sipërme dhe të poshtme dhe të majtë dhe të djathtë, mund të shkruani dy vlera:
mbushje: 24px 48px;Vlera e parë (24px) do të zbatohej në krye dhe në fund, ndërsa e dyta do të zbatohej në të majtë dhe në të djathtë.
Nëse shkruani tre vlera, kjo do të bëjë mbushjen horizontale (majtas dhe djathtas) njëjtë, duke ndryshuar pjesën e sipërme dhe të poshtme:
mbushje: fundi i sipërm djathtas dhe majtas; mbushje: 0px 1px 3px;Sipas modelit të kutisë CSS, mbushja është më e afërt me elementin / përmbajtjen vetë. Kjo do të thotë që mbushja shtohet në një element ndërmjet gjerësisë ose lartësisë së përmbajtjes dhe vlerave të kufirit që përdorni. Nëse mbushja është vendosur në zero, atëherë ajo ka të njëjtën avantazh si përmbajtja.
CSS Padding Vlerat
Mbushja CSS mund të marrë ndonjë vlerë jo-negative gjatësi. Sigurohuni që të specifikoni matjen, të tilla si px ose em. Ju gjithashtu mund të specifikoni një përqindje për mbushjen tuaj, e cila do të jetë një përqindje e gjerësisë së bllokut që përmbajnë elementin. Kjo përfshin për mbushjen e sipërme dhe të poshtme. Për shembull:
#container {width: 800px; lartësia: 200px; } #container p {width: 400px; lartësia: 75%; mbushje: 25% 0; }Lartësia e paragrafit brenda elementit #container do të jetë 75% e lartësisë së kontejnerit plus 25% të gjerësisë për mbushjen e sipërme dhe 25% të gjerësisë për mbulesën e poshtme. Kjo arrin 300 + 200 + 200 = 700px.
Efektet e shtimit të mbushjes CSS
Në elementet e nivelit të bllokut , mbushja zbatohet në të katër anët. Për shkak se elementi është tashmë një bllok ose kuti, mbushja zbatohet në anët e kutisë.
Kur mbushja e CSS shtohet tek elementët inline , mund të ketë disa mbivendosje të elementeve mbi dhe nën elementin inline nëse mbulesa vertikale e tejkalon lartësinë e linjës, por nuk e shtyn poshtë lartësinë e vijës. Zbutja horizontale CSS e aplikuar për elementët inline do të shtohet në fillim të elementit dhe në fund të elementit. Dhe padding mund të përfundojë linjat. Por kjo nuk do të zbatohet për të gjitha linjat e një elementi me shumë rreshta, kështu që nuk mund të përdorësh mbushjen për të futur një segment të përmbajtjes inline lineare.
Gjithashtu, në CSS2.1, ju nuk mund të krijoni blloqe enësh ku gjerësia varet nga një element me përqindje për widths (ose gjerësi padding). Nëse e bën, rezultati është i padefinuar. Shfletuesit ende do të shfaqin përmbajtjen, por nuk mund të merrni rezultatet që prisni. Nëse mendoni për këtë, ka kuptim, sikur elementi juaj i enës duhet të dijë gjerësinë e elementëve të tij të fëmijës në mënyrë që të përcaktojë gjerësinë e saj - siç është kur nuk ka një gjerësi të paracaktuar dhe një ose më shumë një gjerësi e vendosur si një përqindje e elementit të enës, kjo krijon një zinxhir rrethor pa përgjigje. Nëse përdorni përqindjet për gjerësi të çdo gjëje në dokumentin tuaj, duhet të siguroheni që gjerësia e elementeve mëmë të jetë gjithashtu e përcaktuar.