10 grundläggande lektioner i CSS

Det finns fyra sidor i ett htmlelement. Utgångsläget är därför top – right – bottom – left. Padding anger alltså hur mycket “luft”, själva avståndet, det ska vara från kanten på själva elementet till kanten på de omgivande htmlelementen. 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);

Ett problem som kan uppstå är att IE inte tolkar värdet för padding på samma vis som andra webbläsare. För grundligare information om detta läs gärna om boxmodelhack
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 htmlelement 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:

  1. 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!

Liknande poster:

5 Comments Add yours

  1. Erik says:

    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. Erik says:

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

    2. Lena says:

      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. Björn Andersson says:

    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. Lena says:

      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

Leave a Reply

Your email address will not be published. Required fields are marked *