Bildresultat för padding margin

Margin, Border, Padding, Height och Width

När vi använder oss av olika indelningar (division) på en webbplats så skapar vi i själva verket rektanglar som vi lägger text eller bilder i. Dessa rektanglar skapar vi med hjälp av <div>-taggen som används för att dela upp innehåll i olika delar. Hur stora dessa är, avståndet mellan dem, samt tomrummet från kant till text eller bild avgörs av fem egenskaper:

  1. Margin – Marginalen är det yttre avståndet, exempelvis avståndet mellan en <div> och vänsterkanten eller toppdelen av en webbplats. Marginalen ser till så att ett <div> element exempelvis inte ligger direkt bredvid något, utan att det finns marginal däremellan. Exempelvis: Margin 10px; gör så att det skapas 10 pixlar tomrum runtomkring <div>’en.
  2. Border – Ramen är istället hur bred ram vi vill ha inne i en div. Ramen ligger innanför marginalen och man kan exempelvis färga den, tala om hur tjock den ska vara, eller om den ska vara streckad, punktad, eller liknande. Exempelvis: border: 1px solid red; gör så att vi får en tunn röd kantlinje runt vår <div>.
  3. Padding – Den inre marginalen är avståndet från ramen till text- eller bildinnehållet. Denna gör så att det alltså finns ett tomrum mellan exempelvis den röda linjen till där texten börjar, så att de inte flyter ihop. Exempelvis: Padding: 10px; gör så att det skapas 10 pixlar tomrum inuti <div>’en.

Samtliga av de tre ovanför kan dessutom kontrolleras så att man får olika avstånd eller tjocklek beroende på var någonstans på ramen man menar. Man delar därför upp dem i ”top”, ”left”, ”right” och ”bottom”. Man kan använda dessa på två sätt:

  1. Padding-left: 10px; gör exempelvis så att avståndet från vänster till exempelvis en text är 10 pixlar. Medan paddingen ovan, under och till höger är på standardvärdet noll.
  2. Margin: 25px 10px 10px 5px; gör istället att toppmarginalen är 25 pixlar, både höger- och vänstermarginalen är 10 pixlar, samt bottenmarginalen är 5 pixlar.

Height och Width avgör bredden och höjden på själva <div>’en och kan även denna anges i pixlar.

Det kan vara bra att känna till att om vi anger avstånden eller tjockleken i pixlar så kommer dessa värden att vara absoluta. Anger vi istället relativa värden såsom rem så får vi relativa mått. Fördelen med relativa mått är att de skalar beroende på exempelvis användarens skärm- eller fönsterpixeldimensioner. En mobiltelefon exempelvis har andra proportioner på sin skärm. Mer om relativa mått och flytande element i ett inlägg framöver!

Published
Categories webbutveckling
Views 47

Comments

No Comments

Lämna ett svar