WN - html5 lägger automatiskt till 3px bottom-padding

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - html5 lägger automatiskt till 3px bottom-padding (https://www.wn.se/forum/showthread.php?t=1052745)

znap	2012-03-22 09:32

html5 lägger automatiskt till 3px bottom-padding

Tjabba!

Vore ytterst tacksam om någon kunde hjälpa mig med detta. Sitter och bygger en html-mockup från scratch. Jag har så här långt väldigt få css-regler. Bara några divvar som utgör strukturen på sidan. Till min förvåning får alla div-element en padding i botten på 2-3px, detta inträffar endast när div-elementet har ett innehåll. Jag har inte har skrivit in regler för detta i CSS-koden, har ingen padding alls i min CSS. Jag kan lösa problemet genom att antingen sätta line-height:0 på divvarna (vilket ställer till med en uppsjö andra problem givetvis), eller att jag tar bort html5-doctype.

Någon som känner till detta? Vad kan man göra?

Mvh Vic

Clarence

2012-03-22 09:42

vertical-align:top|bottom löser nog ditt "problem". Egentligen är ditt problem att din browser gått ifrån quirks mode för att använda w3c box model.

Taget från css 2.1 specen:
"...In case [line boxes] are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height."

znap	2012-03-22 10:46

hm... Vilket/Vilka element är det jag ska ange vertical-align för? Jag stör mig på att jag ska behöva bry mig om det här :) Att jag måste in och dutta med vertical-align eller line-height där jag tidigare inte behövde är väl vad jag ser som "problemet", om du förstår hur jag menar. Tycker som sagt inte att det borde bli en marginal i botten.

Har löst det på följande sätt:

Kod:

* {

    ...

    line-height: 0;

}



html, body, span, applet, input, textarea, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

    line-height: normal;

}

Känns lite väl hax0r :(

Cosma

2012-03-27 13:18

Släng in en reset.css så löser det sig säkert. http://html5doctor.com/html-5-reset-stylesheet/

Alla tider är GMT +2. Klockan är nu 08:38.