kaxigt.com

Jag skriver om webben för webben

10 grundläggande lektioner i CSS

Postad: 7 juni 2009 | CSS-guider | 5 Comments
Lästid: 42 minuter

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);

Boxmodel-hack och star-HTML

Ett boxmodelhack använder man sig av för att tvinga IE att läsa en css-kod som ignoreras av andra webbläsare

En tidig lösning på hur man kunde anpassa margin och padding med varandra i olika webbläsare, framförallt i IE, utan att den angivna bredden eller höjden kollapsade var Tanteks boxmodel-hack och star-html * tidigt 2000-tal. Star-html * är universal och vi använder det än idag.

Jag skrev en artikel 2006 i Pellesoft Tech Forum angående detta.

Anledningen till att jag tar upp denna dåtida lösning beror helt på att jag tycker det är viktigt att du får kunskap om att man tidigare fick göra olika ”css-hacks” när vi programmerade för att i huvudsak IE skulle klara av att tolka HTML, samt HUR vi löste det tack vare Tantek.

Att förstå hur box-modelhack skrevs och tolkades ges god kunskap även för hur dagens margin och padding kan användas och tolkas av webbläsarna, såsom CSS3 box-sizing:border-box. Och varför inte hur flexbox mer och mer tagit plats. CSS-tricks box-sizing och flexbox beskriver detta galant (engelska). Väl värt att läsa.


Ett problem som uppstod var att IE inte tolkade värdet för padding på samma vis som andra webbläsare. För grundligare information om detta läs gärna min artikel om boxmodelhack här på kaxigt.com.
boxmodelhack

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!