10 grundläggande lektioner i CSS

CSS
Postad: 07.06.2009 | CSS

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 IE och Netscape ger body en marginal på 8px som defaultvärde – det gör inte Opera som istället lägger till 8px padding som default.

Om man flyttar eller ändrar marginalen för hela sidan så bör man då också göra en extra kontroll för att se om Opera renderar de nya värdena rätt eftersom det troligtvis även kommer att krävas en ändring för padding.

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

Välkommen dit!

5 svar på “10 grundläggande lektioner i CSS

  1. Hej!
    Tack för en mycket bra guide! Jag har följt den till punkt och pricka och allt fungerar bra, förutom font-size. Jag använder style sheet och jag kan ändra textfärg, länkfärg, bakgrundsfärg osv, men när jag försöker skriva in font-size så fungerar det inte på den text som är skriven innom i mina html doc. Jag kan ju såklart skriva in font-size i varje html doc men jag vill ju använda mitt style sheet :) Jag har skrivit in det på följande sätt (nu skriver jag bara i font-size) i body {font-size:10px} och p { font-size:10px;} men det blir ändå bara standard storlek. Har tittat i bådde chrome, IE och firefox. Vet du vad detta kan bero på? Tack på förhand! /Erik

    1. det ska alltså stå ”krokodilgap höger P krokodilgap” vänster i meningen: ”…text som är skriven innom (krokogapPkrokogap) i mina html doc.

    2. Hej Erik!
      All css som läggs in i dokumentet prioriteras före stilmallen. Har du möjligtvis angett font-size för speciella div-block i stilmallen? Kika här under:

      
      #main {background: [...]; padding:[...], font-size:[...];}
      

      Eller:

      
      #main p {font-size:[...];}
      

      Ovanstående css prioriteras för font-size i body, dock ärver de egenskaperna från parent (body).
      Du har angivit body {font-size:10px} och p { font-size:10px;} därför blir all text på sidan lika stor. Body innebär ALL text, inklusive stycken (p), men du har också angivit att dina stycken ska vara 10px. Testa och ta bort font-size i body. Därefter anger du istället fontstorleken för varje element i stilmallen.
      mvh/Lena

  2. Ville bara tacka för en riktigt snygg och välskriven guide. Jag snubblade in på din sida mest bara på måfå och har varit fast sedan lunch, så det är ett gott betyg:) Bra jobbat!

    1. Hej Björn!

      Vad trevligt att du ”fastnade” på min sida. Jag hoppas att du fick med dig lite matnyttigt =)
      TACK för berömmet!
      mvh/Lena

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.