Teksten i kortet ditt klistrer seg helt inntil kanten. Knappen ser klemt ut, og innholdet mangler rom til å puste. Det du trenger er padding i CSS. Padding skaper luft mellom innholdet og kanten av boksen, og er en av de egenskapene du bruker oftest når du bygger nettsider. Men padding har flere skrivemåter, og rekkefølgen på verdiene følger en logikk du bør lære tidlig.
Hva padding i CSS gjør med boksen din
Padding legger til indre avstand i en boks. Den sitter mellom innholdet og border. Har du en bakgrunnsfarge på elementet, dekker fargen også padding-området. Det skiller padding fra margin, som ligger utenfor boksen og alltid er gjennomsiktig.
Når du legger til padding på et kort med hvit bakgrunn, ser du umiddelbart hvordan innholdet får plass. Teksten trekker seg inn fra kantene, og det hele ser mer profesjonelt ut. Uten padding havner innholdet helt inntil kanten av boksen, noe som nesten aldri er ønskelig i et ferdig design.
Sett padding på hver side individuelt
Du kan definere padding for hver side av boksen med egne egenskaper: padding-top, padding-right, padding-bottom og padding-left. Denne rekkefølgen er ikke tilfeldig. Den følger klokken: start i toppen og gå med klokken rundt. Denne konvensjonen brukes gjennomgående i CSS, også for margin, og er verdt å pugge med en gang.
Individuell padding gir full kontroll. Du kan ha 20 piksler i toppen og bunnen, men bare 10 piksler på sidene. Det er nyttig når du trenger ulik avstand i ulike retninger, for eksempel på et kort der du vil ha mer luft over og under teksten enn på sidene.
Shorthand: alle sider i en linje
Den enkleste shorthand-varianten er en enkelt verdi: padding: 15px. Den setter samme avstand på alle fire sider. Det er det du bruker oftest når du bare vil ha jevn luft rundt innholdet.
Med to verdier angir du vertikal og horisontal padding separat. Den første verdien gjelder topp og bunn, den andre gjelder venstre og høyre. For eksempel gir padding: 30px 0 luft over og under, men ingen på sidene.
Shorthand med tre og fire verdier
Tre verdier følger mønsteret topp, horisontalt, bunn. Den første verdien gjelder toppen, den andre gjelder både venstre og høyre, og den tredje gjelder bunnen. Det er nyttig når du vil ha ulik avstand i topp og bunn, men lik avstand på sidene.
Fire verdier følger klokken: topp, høyre, bunn, venstre. Her har du full kontroll over hver side, men i en kompakt skrivemåte. Skriv padding: 20px 15px 30px 15px for ulik avstand i topp og bunn med lik avstand på sidene. Klokke-logikken gjør det lettere å lese verdiene uten å blande dem sammen.
Padding og box-sizing henger sammen
Med standard box-sizing (content-box) legges padding utenpå bredden du definerer. Et element med bredde 300 piksler og 20 piksler padding på hver side blir totalt 340 piksler bredt. Med border-box inkluderes padding i bredden, slik at elementet forblir 300 piksler. Det er derfor de fleste prosjekter starter med border-box, så du slipper å justere bredden hver gang du endrer padding.
Padding på inline-elementer
Horisontal padding fungerer som forventet på inline-elementer. Du får luft til venstre og høyre, og naboelementer skyves bort. Men vertikal padding oppfører seg annerledes. Den legges til visuelt, men den skyver ikke bort innhold over eller under. Boksen kan overlappe linjer rundt seg. Trenger du full kontroll over padding i alle retninger på et inline-element, kan du endre display-verdien til inline-block eller block.
Lær mer om padding i CSS med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset bygger du et kort fra bunnen av og ser hvordan padding former designet steg for steg:
- Alle shorthand-variantene demonstrert med klokke-logikken
- Forskjellen mellom padding og margin i praksis
- Hvordan du kombinerer padding med bakgrunnsfarge og bredde for profesjonelle komponenter
Du kan lese mer om padding i MDN sin dokumentasjon om CSS padding.
