Padding
Så här fungerar padding
I likhet med marginaler så kan padding tilldelas alla taggar inom taggen body. Även padding förklaras enklast genom att använda ett stycke-element med en kantlinje.
Exempel:
Det här är exempel nummer 1: ett stycke utan padding.
Här är exempel 2, ett stycke med 5 pixlar padding.
Skillnaden mellan marginal och padding
Det här är exempel 3 med 20 pixlars bottenmarginal
Det här är exempel 4 med 10 pixlars bottenpadding
Det här är exempel 5 med 10 pixlar toppmarginal och 20 pixlars bottenpadding.
Tycker du att exempel 3, 4 och 5 ser likadana ut? Visst, för ögat så är de ju faktiskt likadana, men strukturen är helt olika, vilket du enklast märker om vi lägger på bakgrundsfärger för varje stycke enligt nedan.
Exempel 3, 4 och 5 med bakgrundsfärg ser då ut så här:
Exempel 3 med 20 pixlars bottenmarginal
Exempel 4 med 10 pixlars bottenpadding
Exempel 5 med 10 pixlar toppmarginal och 20 pixlars bottenpadding.
Om du blev förvirrad nu så rekommenderar jag att du tittar igenom boxmodellen som är en översikt av padding och marginaler.
Padding med inbakad CSS
Padding kan skrivas och förkortas på samma sätt som marginaler. Om du vill ha likadan padding för hela elementet, i det här fallet ett stycke så skrivs detta:
<p style="padding: 2px;">Ett stycke med padding </p>
Nästa artikel: Boxmodellen
