CSS Tip: Anvend Padding til Inline-elementer på tværs af To eller flere Linjer!
Hvis du ligger en baggrundsfarve på en display inline element, foreksempel en overskrift så følger baggrundsfarven pænt teksten også i to eller flere linjer. Men baggrundsfarven går lige til kant. I de tilfælde vil man måske gerne tilføje noget padding i begge sider så der er lidt luft til kanten. Normalt virker padding ikke på inline-elementer, men der er en smart løsning!
Ved hjælp af border-left og border-right kan du opnå en slags pseudo-padding, der giver lidt luft til kanten af elementet. Dog vil denne pseudo-padding kun blive tilføjet til første linje til venstre og sidste linje til højre. For at få alle linjer til at have ensartet padding på alle linjer, kan du bruge de magiske egenskaber -webkit-box-decoration-break og box-decoration-break.
Disse egenskaber fungerer dog kun i WebKit/Blink-browsere, der har denne mulighed. Så vær opmærksom på, at det er vigtigt at teste dine ændringer i forskellige browsere for at sikre kompatibilitet.
Her er et eksempel på, hvordan du kan bruge det:
.dInl {
border-left: solid 8px red;
border-right: solid 8px red;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Vær opmærksom på, at -webkit-box-decoration-break og box-decoration-break kun fungerer i WebKit/Blink-browsere, der har denne mulighed. Derfor anbefales det at teste dine ændringer i forskellige browsere for at sikre kompatibilitet.