kaxigt.com

Välkommen till sjunde lektionen!

Margin och padding

Det finns fyra sidor i ett html-element. Utgångsläget är top – right – bottom – left, dvs medurs. Padding anger hur mycket ”luft”, själva avståndet, det ska vara från kanten på själva elementet till kanten på de omgivande html-elementen.

Värdet anges i auto, px, eller %. Men man kan även ge elementet en specifik padding genom att ange ett eller olika värden i padding-top, padding-right, padding-bottom, padding-left.

Padding flyttar inte själva elementet – utan hur texten/elementet/blocket placeras i förhållande till sig själv.

Egenskaperna för padding kan användas som shorthand declarations, se nedanstående exempel:

1. padding: 5px(top och bottom) 10px(right och left);
2. padding: 5px(top) 5px(right) 10px(bottom) 10px(left);
3. padding: 5px(top) 10px(right) 10px(bottom);
4. padding: 5px(top, right, bottom, left);

Marginaler är en generell märkning som anger hur stor utrymme det ska vara runt ett element. Här är det också möjligt att använda negativa värden för att överlappa innehållet.

Precis som med padding kan man använda värdet auto, px, cm, eller % och ge ett html-element en specifik marginal genom att ange olika värden i egenskaperna margin-top, margin-right, margin-bottom och margin-left. Margin flyttar alltså hela element eller block i önskad riktning.

1. margin-left: 5px;
2. margin-top: 15px;
3. margin-bottom: 15px;
4. margin-right: 5px
5. margin-bottom: -15px

Egenskaperna för margin kan också användas som shorthand declarations:

margin: 5px(top och bottom)  10px(right och left);

Tips!

Det kan vara till nytta att veta att vissa webbläsare, exempelvis Chrome, lägger till en marginal på 8px som defaultvärde. Då kan man re-set sin css (ställa in alla värden till 0) eller låta Normalize.css ta hand om problemen. Läs om skillnaden mellan Normalize vs. reset-css samt mer ingående i artikeln Normalize CSS or CSS Reset?!.

Det går även bra att lägga till följande högst upp i stilmallen

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}
body {margin: 0;
}

I lektioner nummer 8 ska vi bekanta oss med hur man kan presentera sina listor.

Välkommen dit!