webForumDet fria alternativet

Hur skriva padding på korrekt sätt?

HTML & CSS

8 svar · 321 visningar · startad av AndreasC

Medlem sedan mars 20011 964 inlägg
Frågan#1

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?

Medlem sedan juli 2003270 inlägg
#2

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

Medlem sedan mars 20011 964 inlägg
#3

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.

Medlem sedan mars 20011 964 inlägg
#4

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.

Medlem sedan apr. 2000313 inlägg
#5

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.

Medlem sedan mars 20011 964 inlägg
#6

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?

Medlem sedan juli 2003270 inlägg
#7

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!

Medlem sedan juli 20013 378 inlägg
#8

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

Medlem sedan dec. 20042 245 inlägg
#9

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

258 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
126 ms — deklarationer (db)
0 ms — hämta statistik (cache)
127 ms — hämta tråd, inlägg och bilagor (db)
128 ms — ändringar (db)