El farcit CSS és una de les propietats del model de caixa CSS . Aquesta propietat de taquigrafia estableix el farciment dels quatre costats d'un element HTML. El rebliment CSS es pot aplicar a gairebé totes les etiquetes HTML (excepte algunes etiquetes de taula). A més, els quatre costats de l'element poden tenir un valor diferent.
Propietat de farcit de CSS
Per utilitzar la propietat de farciment abreviatura CSS, podeu utilitzar el mnemònic "TRouBLe" (o "TRiBbLe" per als fans de Star Trek). Això significa cap amunt , dret , inferior i esquerre , i es refereix a l'ordre dels amples de farciment que heu establert a la propietat de taquigrafia. Per exemple:
farcit: dalt a la dreta a la part inferior esquerra; padding: 1px 2px 3px 6px;Si utilitzeu els valors anteriors, s'aplicaria un valor de farcit diferent a cada costat de qualsevol element HTML que l'estigui aplicant. Si voleu aplicar el mateix farcit als quatre costats, podeu simplificar el CSS i escriure un valor:
padding: 12px;Amb aquesta línia de CSS, s'aplicaran 12 píxels de farciment als 4 costats de l'element.
Si voleu que el farcit sigui el mateix per a la part superior i la inferior, i per a l'esquerra i la dreta, podeu escriure dos valors:
farcit: 24px 48px;El primer valor (24 px) s'aplicaria a la part superior i inferior, mentre que el segon s'aplicarà a l'esquerra i a la dreta.
Si escriu tres valors, farà que el farcit horitzontal (esquerra i dreta) sigui el mateix, mentre canvieu la part superior i inferior:
farcit: fons superior dret i esquerre; farcit: 0px 1px 3px;Segons el model de caixa CSS, el farciment és el més proper a l'element / contingut en si. Això significa que el farciment s'afegeix a un element entre l'ample o l'alçada del contingut i els valors de vora que utilitzeu. Si el farciment està fixat en zero, llavors té la mateixa vora que el contingut.
Valors de farcit de CSS
El farcit CSS pot prendre qualsevol valor de longitud no negativa. Assegureu-vos d'especificar la mesura, com px o em. També podeu especificar un percentatge del vostre farcit, que serà un percentatge de l'amplada del bloc que conté el element. Això inclou per al farciment superior i inferior. Per exemple:
#container {width: 800px; alçada: 200 px; } # container p {width: 400px; alçada: 75%; farcit: 25% 0; }L'alçada del paràgraf a l'interior de l'element #container serà del 75% de l' alçada del #contenidor més un 25% de l'amplada del farciment superior i del 25% de l'amplada del farciment inferior. Això és de 300 + 200 + 200 = 700px.
Efectes de l'addició de farcit CSS
En els elements de nivell de bloc , s'aplica el farciment als quatre costats. Com que l'element ja és un bloc o una caixa, el revestiment s'aplica als costats de la caixa.
Quan s'afegeix el farciment CSS als elements en línia , pot haver-hi una superposició d'elements per sobre i per sota de l'element en línia si el farciment vertical excedeix l'alçada de la línia, però no s'impulsarà l'alçada de la línia. El recobriment CSS horitzontal aplicat als elements en línia s'afegirà al principi de l'element i al final de l'element. I el farciment pot embolicar línies. Però no s'aplicarà a totes les línies d'un element multi-línia, de manera que no es pot utilitzar el farciment per sagnar un segment de contingut en línia multi-línia.
A més, en CSS2.1, no podeu crear blocs de contenidors on l'ample depèn d'un element amb percentatges d'ample (o amplada de farciment). Si fas el resultat no està definit. Els navegadors encara mostraran els continguts, però és possible que no obtingueu els resultats que esteu esperant. Si pensa en això, té sentit, com si l'element contenidor necessiti saber l'amplada dels elements secundaris per definir l'amplada, com quan no té un ample predefinit i un o més ha un ample fixat com a percentatge de l'element contenidor, s'estableix una cadena circular sense resposta. Si utilitzeu percentatges d'amplada de qualsevol element del vostre document, heu d'assegurar-vos que també es defineixen els amplats dels elements primaris.