Padding
I likhet med marginaler så kan padding användas på alla taggar inom <body> </body>.
Padding, exempel
Padding förklaras enklast genom att använda ett element med en kantlinje enligt nedan.
Det här är exempel nummer 1: ett stycke utan padding.
Här är exempel 2, ett stycke med 5 pixlar padding.
Padding används alltså för att skapa ett avstånd mellan text och ytterkant medan marginaler används för att skapa avstånd mellan ytterkant och andra element.
Exempel, 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.
Exemplen - nu med bakgrundsfärger
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.
Boxmodellen är ytterligare en förklaring av skillnaden mellan marginaler och padding.
<<< Marginaler || Boxmodellen >>>
Relaterat:
