CSS-stoppning är en av egenskaperna hos CSS-lådmodell. Den här stenografiska egenskapen anger vadderingen runt alla fyra sidorna av ett HTML-element. CSS-stoppning kan appliceras på nästan alla HTML-tagg (förutom några av tabelltaggarna). Dessutom kan alla fyra sidor av elementet ha ett annat värde.
CSS Padding Property
För att använda den förkortade CSS-vadderingsegenskapen kan du använda mnemonic "TRouBLe" (eller "TRiBbLe" för Star Trek-fans). Detta står för topp, rätt, bottenoch vänster, och det hänvisar till ordningen på vadderingsbredderna du ställer in i shorthand-egenskapen. Till exempel:
stoppning: uppe till höger nedre vänster;
stoppning: 1px 2px 3px 6px;
Om du använde värdena ovan, skulle det använda ett annat utfyllnadsvärde på alla sidor av vilket HTML-element du tillämpar. Om du vill applicera samma stoppning på alla fyra sidor kan du förenkla din CSS och skriv bara ett värde:
stoppning: 12 pixlar;
Med den raden av CSS, skulle 12 pixlar av stoppning gälla för alla 4 sidor av elementet.
Om du vill att stoppningen ska vara densamma för topp, botten och vänster och höger kan du skriva två värden:
stoppning: 24px 48px;
Det första värdet (24 pixlar) gäller överst och längst ner, medan det andra gäller vänster och höger.
Om du skriver tre värden kommer det att göra den horisontella stoppningen (vänster och höger) densamma, medan du ändrar topp och botten:
stoppning: längst upp till höger och vänster;
stoppning: 0px 1px 3px;
Enligt CSS-boxmodellen är vaddering närmast själva elementet / innehållet. Detta innebär att stoppning läggs till ett element mellan innehållets bredd eller höjd och eventuella gränsvärden du använder. Om stoppningen är noll har den samma kant som innehållet.
CSS-vadderingsvärden
CSS-stoppning kan ta valfritt längdvärde. Var noga med att ange mätningen, t.ex. px eller em. Du kan också ange en procentsats för din stoppning, som kommer att vara en procentandel av bredden på elementets innehållande block. Detta inkluderar topp och botten vaddering. Till exempel:
#container {bredd: 800px; höjd: 200px; }
#container p {bredd: 400px; höjd: 75%; stoppning: 25% 0; }
De höjd i stycket inuti #behållare elementet kommer att vara 75% av #behållareHöjd plus 25% av bredden för den översta stoppningen och 25% av bredden för den nedre stoppningen. Detta uppgår till 300 + 200 + 200 = 700 pixlar.
Effekter av att lägga till CSS-padding
På element på blocknivå, appliceras stoppningen på de fyra sidorna. Eftersom elementet redan är ett block eller en låda appliceras stoppningen på lådans sidor.
När CSS-stoppning läggs till inbyggda element, det kan finnas en viss överlappning av element över och under inline-elementet om den vertikala stoppningen överstiger linjens höjd, men den kommer inte att trycka linjehöjden nedåt. Horisontell CSS-stoppning applicerad på inbyggda element läggs till i början av elementet och slutet på elementet. Och stoppningen kan slå in linjer. Men det kommer inte att gälla för alla rader i ett element med flera rader, så du kan inte använda stoppning för att indraga ett segment av flerradigt inlineinnehåll.
I CSS2.1 kan du inte heller skapa containerblock där bredden beror på ett element med procentandelar för bredder (eller vadderingsbredder). Om du gör är resultatet odefinierat. Webbläsare visar fortfarande innehållet, men du kanske inte får de resultat du förväntar dig. Om du tänker på det är det vettigt, som om ditt containerelement behöver veta bredden på sina underordnade element för att definiera dess bredd - till exempel när den inte har en fördefinierad bredd och en eller flera har en bredd som en procentandel av behållarelementet, sätter detta upp en cirkulär kedja utan svar. Om du använder procentsatser för bredder av något i ditt dokument, bör du se till att överordnade elementbredder också är definierade.