CSS- plenigado estas unu el la propraĵoj de la CSS-skatolo-modelo . Ĉi tiu taŭgaĵa propraĵo aranĝas la kompletigon ĉirkaŭ la kvar flankoj de HTML-elemento. CSS-plenigado povas esti aplikata al preskaŭ ĉiuj HTML-etikedoj (krom kelkaj el la tabeloj-etikedoj). Aldone, ĉiuj kvar flankoj de la elemento povas havi malsaman valoron.
CSS Plenigado Proprieto
Por uzi la taĉigadon de CSS kompletigo, vi povas uzi la mnemonic "TRouBLe" (aŭ "TRiBbLe" por vi Star Trek-adorantoj). Ĉi tio staras por supro , dekstra , malsupre kaj maldekstre , kaj ĝi rilatas al la ordo de la kompletigaj larĝoj, kiujn vi starigis en la taŭgaĵa propraĵo. Ekzemple:
Plenigado: supre dekstra malsupre maldekstre; kompletigo: 1px 2px 3px 6px;Se vi uzus la valorojn listigitajn supre, ĝi aplikus malsaman kompletan valoron al ĉiu flanko de kia ajn HTML-elemento vi aplikos ĝin al. Se vi volas apliki la saman kompletigon al ĉiuj kvar flankoj, vi povas simpligi vian CSS kaj nur skribi unu valoro:
kompletigo: 12px;Kun tiu linio de CSS, 12 pikseloj de kompletigo apliki al ĉiuj 4 flankoj de la elemento.
Se vi volas ke la kompletigo estu la sama por la supro kaj malsupro kaj maldekstre kaj dekstra, vi povas skribi du valorojn:
kompletigo: 24px 48px;La unua valoro (24px) apliki al la supro kaj malsupro, dum la dua apliki maldekstre kaj dekstre.
Se vi skribas tri valorojn, tio faros la horizontalan kompletadon (maldekstren kaj dekstre) saman, ŝanĝante la supron kaj la malsupron:
kompletigo: supre dekstra kaj maldekstra fundo; kompletigo: 0px 1px 3px;Laŭ la CSS-skatolo-modelo, kompletigo estas pli proksima al la elemento / enhavo mem. Ĉi tio signifas, ke kompletigo aldoniĝas al elemento inter la enhavo larĝa aŭ alteco kaj iuj landlimaj valoroj vi uzas. Se la kompletigo estas nula, tiam ĝi havas la saman randon kiel la enhavo.
CSS Plenigaj Valoroj
CSS-plenigado povas preni ajnan negativan longan valoron. Estu certe specifi la mezuradon, kiel ekzemple px aŭ em. Vi povas ankaŭ specifi procenton por via kompletigo, kiu estos procento de la larĝa de la elemento enhavanta blokon. Ĉi tio inkluzivas supre kaj malsupran kompletigon. Ekzemple:
#container {larĝa: 800px; alteco: 200px; } #container p {larĝa: 400px; alteco: 75%; Plenigado: 25% 0; }La alteco de la alineo ene de la elemento #container estos 75% de la alto de #container kaj pli ol 25% de la larĝo por la pinta kaj 25% de la larĝa por la malsupra kompletigo. Ĉi tio totigas 300 + 200 + 200 = 700px.
Efektoj Aldonante CSS Plenigado
Sur blok-nivelaj elementoj , la kompletigo aplikiĝas sur la kvar flankoj. Ĉar la elemento estas bloko aŭ skatolo jam, la kompletigo aplikiĝas al la skatolo-flankoj.
Kiam la kompletigo de CSS aldoniĝas al inlinaj elementoj , eble iuj superponeblaj elementoj supre kaj sub la inlinea elemento se la vertikala kompletigo superas la linion alte, sed ĝi ne antaŭenpuŝos la linion altecon. Horizontala CSS-plenigado aplikata al inaj elementoj estos aldonita al la komenco de la elemento kaj la fino de la elemento. Kaj la reloj povas envolvi liniojn. Sed ĝi ne aplikeblas al ĉiuj linioj de plurlinia elemento, do vi ne povas uzi padding por indenti segmenton de plurlinia inlinea enhavo.
Ankaŭ, en CSS2.1, vi ne povas krei ujo-blokojn kie la larĝo dependas de ero kun procentoj por larĝecoj (aŭ kompletigoj de larĝeco). Se vi faras la rezulton, nefinite. Foliumiloj ankoraŭ montros la enhavon, sed vi eble ne ricevos la rezultojn, kiujn vi atendas. Se vi pensas pri tio, ĝi havas senton, kvazaŭ via ujo elemento bezonas scii la larĝecon de ĝiaj infanaj elementoj por difini ĝian larĝecon, kiel kiam ĝi ne havas antaŭdifinitan anchuron, kaj unu aŭ pli havas larĝa aro kiel procento de la ujo, ĉi tiu starigas cirkla ĉeno sen respondo. Se vi uzas procentojn por larĝeco de io ajn en via dokumento, vi devas certigi, ke la gepatraj anoj ankaŭ estas difinitaj.