CSS-utfyllnad tillåter en HTML-kodare att ställa in standardutfyllnad eller död utrymme utanför ett HTML-element. Fördelen med att göra detta är att det sparar kodaren från att upprepa den utfyllnadskoden för varje instans av det elementet, och skapar enklare konsekvens på sidan. HTML-elementet som ska vadderas kan vara valfritt antal saker, till exempel ett stycke, en tabell eller en rubrik.
För att skapa utfyllnad i CSS måste du först identifiera HTML-elementet som du vill utfylla. Detta element som du vill fylla på kallas väljaren. Sedan vill du ange lämpliga utfyllnadsvärden. Det finns fem olika typer av utfyllnadsegenskaper i CSS — en för alla fyra sidor av ett element samtidigt och fyra andra för varje enskild sida av elementet (t.ex. vänster sida, höger sida, översidan eller undersidan ). En egenskap som tillåter programmeraren att ange värden för alla fyra sidorna av ett HTML-element samtidigt kallas en stenografisk egenskap.
Kodspråket som används för att specificera en deklaration av CSS-utfyllnad är helt enkelt ordet ”utfyllnad”. Efter den etiketten finns de relevanta ”värdena” för stoppningen, eller information om hur mycket utrymme som önskas, vanligtvis representerade antingen av pixlar eller en procentandel. Utfyllnaden och värdena är skrivna inom klamrar eller parenteser (dvs. ”{” och ”}”). Före allt detta är HTML-elementet som ska fyllas (t.ex. ”p” för stycket eller ”H2” för nivå 2-rubriker).
När det gäller hur värdet representeras kan värden representeras i pixlar (t.ex. 1 px eller 5 px), punkter (t.ex. 1 pkt eller 5 pkt) eller tum (t.ex. 1 tum eller 5 tum) eller centimeter (t.ex. 1 cm eller 5 cm) . Värden kan också deklareras som en procentandel av HTML-elementet som formateras. Om värdet till exempel är 50 % kommer stoppningen att vara lika med halva storleken på elementet.
Följande exempel är HTML-koden för utfyllnad av ett HTML-element i form av värden som återspeglas i procent respektive längd. Om endast ett värde tilldelas, kommer webbläsare att tilldela denna utfyllnad till alla fyra sidorna av HTML-elementet.
stoppning: 10%;
padding: 100px;
Om du lägger till fler värden till typen av utfyllnadsdeklaration ovan kommer webbläsare att tolka dem på ett visst sätt. Om två värden tilldelas kommer det första att motsvara toppen och botten, medan det andra motsvarar vänster och höger. Tre värden gör att det första hänvisar till toppen, det andra till vänster och höger sida och det tredje till botten av HTML-elementet. Att tilldela maximalt fyra värden gör att det första, andra, tredje och fjärde värdet motsvarar den övre, högra, nedre och vänstra delen av HTML-elementet, i den ordningen. När mer än ett värde anges ska de separeras med mellanslag och avslutas med semikolon, till exempel:
stoppning: 10px 20px 10px 20px;
Utfyllnad i CSS kan också göras en sida i taget. I detta avseende finns det ytterligare fyra stoppningsegenskaper tillgängliga. Dessa är stoppning-top, stoppning-höger, stoppning-botten och stoppning-vänster. För att skapa utfyllnad i CSS på detta mer exakta sätt, måste du märka egenskaperna med samma syntax som förkortade deklarationer enligt ovan. Var och en av dessa utfyllnadsegenskaper tar bara ett värde i antingen längd eller procent. Till exempel:
padding-top: 10px;
stoppning-höger: 20 pixlar;
padding-bottom: 10px;
padding-left: 20px;
Följande kod skapar en webbsida, deklarerar utfyllnadsegenskaperna mellan stiltaggar och använder dem sedan i ett styckeelement som anges av p-taggen. Texten mellan /* och */ är anteckningar för att förklara vilken typ av utfyllnad som används och skulle inte inkluderas i CSS-utfyllnadskoden.
Denna text har samma stoppning på varje sida. Vadderingen på varje sida är 10px.
Den här texten har en topp- och bottenutfyllnad på 50px och en vänster- och högerutfyllnad på 30px.
Den här texten har en topputfyllnad på 10px, en högerutfyllnad på 20px, en nedre utfyllnad på 10px och en vänsterutfyllnad på 20px.
I exemplet ovan är ”exempel1” etc. namn som tilldelats en klass, som sedan refereras till i styckena. Perioden mellan p-taggen och klassnamnen i början av koden anger en deklaration av en klass som tilldelats ett stycke. Lägg märke till klammerparenteserna efter klassdeklarationen som omsluter värdetilldelningarna för utfyllnadsegenskapen.
Även om detta kan tyckas vara mycket jobb, är det mycket mindre arbetsintensivt än att specificera utfyllnad för varje enskilt stycke. Du kan deklarera en utfyllnadsegenskap för det önskade elementet, som i exemplet ovan är p-taggen, och sedan referera till klassen när du använder elementet mellan sidans body-taggar. Om bara en typ av utfyllnad behövs för alla stycken behöver du inte använda klasser alls. Använd helt enkelt följande kod mellan stiltaggarna och koda sedan styckena utan att ange någon klass. Denna kod skulle gå mellan body-taggarna istället för koden i exemplet ovan.
p {stoppning:10px 20px 10px 20px;}
Denna CSS-utfyllning som detta skulle skapa skulle påverka alla stycken även om det inte fanns någon klass angiven.