---
title: "Hur skriva padding på korrekt sätt?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/125590-hur-skriva-padding-på-korrekt-sätt"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "AndreasC"
published: "2005-04-01T16:46:27.000Z"
updated: "2005-04-01T18:41:21.000Z"
replies: 8
views: 330
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/125590-hur-skriva-padding-på-korrekt-sätt"
---

# Hur skriva padding på korrekt sätt?

## #1 — AndreasC, 2005-04-01T16:46Z

Hur ska man skriva padding så klienten renderar det på korrekt sätt? Jag vill ha en top och en vänster padding men det blir på något sätt fel. Jag skriver som följande:

padding: 200px 0 0 20px;

Alltså 200px från topp och 20px från vänster, botten och höger ska tolkas som 0px.

Vad som händer är att oavsett om jag har en bestämd storlek satt på diven så när jag sätter en padding för top så vill hela diven bli större i höjdled och sätter jag tex 200px där för att få ner innehållet straxt förbi mitten av diven så förskjuts allt som ligger nedanför diven väldigt mycket nedåt. Vad gör jag fel?

Permalänk: https://www.webforum.nu/p/125590

## #2 — Nipon, 2005-04-01T17:09Z

Kan det ha att göra med den vanliga box-funderingen? Padding och Border placeras UTANFÖR höjden och bredden på boxen...

Permalänk: https://www.webforum.nu/p/1583050

## #3 — AndreasC, 2005-04-01T17:13Z

Kanske är det så men padding ska väl inte ge ett sådant resultat för det. En padding från top ska väl inte ge någon padding nedanför innehållet. Då finns det väl ingen vits med att kunna ange något för var och en av de fyra sidorna om de påverkar varandra, oavsett om jag bara anger för en sida.

Permalänk: https://www.webforum.nu/p/1583054

## #4 — AndreasC, 2005-04-01T17:46Z

Fattar inte detta med css, det verkar mer som tur ifall det fungerar.

Har skrivit såhär för en helt vanlig div men varför funkar det inte?

        border: 0;
        padding: 200px 0 0 20px;
        margin: 0;
        width: 100%;
        height: 270px;
        vertical-align: bottom;

Padding gör inte som jag förväntar mig att det ska göra och vertical-align har ingen effekt överhuvudtaget. Det står bottom där men det fattar inte IE. Innehållet renderas längst upp i diven.

Permalänk: https://www.webforum.nu/p/1583066

## #5 — martin, 2005-04-01T18:00Z

Du sätter en höjd på 270px plus en toppmarginal på 200px det blir 470 pixlar sammanlagt. Om det är lite text blir det mycket luft under.

/ m a r t i n - det är inte tur, det är magi.

Permalänk: https://www.webforum.nu/p/1583075

## #6 — AndreasC, 2005-04-01T18:07Z

Jaha ok, nu tror jag jag fattar. Om jag sätter en padding så kommer alltså den att läggas på höjden så det blir 270 + det som står för padding. Hur ska man kunna veta det? Jag vet att padding är för att justera innehållet i elementet och margin är för att justera marginal till andra omgivande element. Det andra hade jag ingen aning om. Har inte hittat EN sida som klargör det.

Men 200 var lite att ta i, men jag testade med mindre och det blev så då också, att hela elementet blev högre. Så om det ska vara som det är med padding: 0; så får jag helt enkelt ta bort 10px från höjden om jag lägger en padding på 10px?

Permalänk: https://www.webforum.nu/p/1583079

## #7 — Nipon, 2005-04-01T18:17Z

Japp!

En box som är 100px hög och 100px bred...

...blir med 10px padding och 2px border åt alla håll...

124px hög och 124px bred!

Permalänk: https://www.webforum.nu/p/1583082

## #8 — jarvklo, 2005-04-01T18:17Z

> **AndreasC skrev:**
>
> Har inte hittat EN sida som klargör det.

Well - det finns några stycken, t.ex. är det glasklart uttryckt i CSS-specifikationen (<http://www.w3.org/TR/CSS21/box.html>) ;)

Fast det är klart, att MSIE inte gjorde så som det är specificerat från början (och att det har inneburit att den framförallt inte gör som specificerat i "quirks" mode utan där helt sonika räknar in padding i bredden) bidrar förstås till förvirringen eftersom det där med var padding räknas in kontra bredden alltså till råga på eländet gått och blivit blivit \<!DOCTYPE-beroende... ;)

Se också t.ex. <http://tantek.com/CSS/Examples/boxmodelhack.html> ;)

Permalänk: https://www.webforum.nu/p/1583083

## #9 — zcorpan, 2005-04-01T18:41Z

> vertical-align har ingen effekt överhuvudtaget. Det står bottom där men det fattar inte IE.

 Där gör IE faktiskt rätt att inte fatta vad du vill (tack och lov :P). "vertical-align" fungerar endast för inline-boxar och tabellceller. ([Läs specen](http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align) ;))

Permalänk: https://www.webforum.nu/p/1583099

---

Tråden på webben: https://www.webforum.nu/amne/html-css/125590-hur-skriva-padding-på-korrekt-sätt
