Søg
Avatar billede mik789 Nybegynder
07. februar 2004 - 14:45 Der er 11 kommentarer og
1 løsning

padding og margin udregnes forskelligt

Prøv at se her: http://www.e-tidsskrift.dk/dev/margin_og_padding.html

Her har jeg testet den måde padding-top og margin-top på et element indvirker på hele siden. Det viser sig at i Gecko browsere (som vel er de mest css-"korrekte") indvirker margin-top og padding-top forskelligt på siden. Hvis et element på siden får en margin-top på 10% føjes der 10% til hele siden (<body>?). Det gøres der ikke med en tilsvarende padding-top på 10%. Det kan ses i Gecko browserne (Netscape / Mozilla) på siden oven for ved at der kommer en lodret scrollbar når der bruges margin-top, men ikke når der bruges padding-top. Desuden skubbes elementet 2px længere nedad når der er brugt padding-top i forhold til når der er brugt margin-top. Det er tydeligt at se på siden. I Internet Explorer sker der ingen ting. Ingen forskel. Kun i Gecko browserne.

Hvorfor det? Hvorfor lægger margin-top højde til hele siden (i stedet for kun at flytte elementet nedad inden for siden)? Hvorfor rykkes elementet lidt længere nedad ved padding-top? Er det korrekt i forhold til css, eller er det en fejl ved Gecko?

//mik
Avatar billede mik789 Nybegynder
07. februar 2004 - 14:47 #1
STORT UPS!!! linket er forkert. der skal være:

http://www.e-tidsskrift.dk/dev/margin_or_padding.html
Avatar billede roenving Novice
07. februar 2004 - 14:57 #2
I css-box-modellen, som den er defineret af w3c regnes margin og border ikke med til et elements størrelse, hvorfor de skal lægges udenom elementet.

-- det mener programmørerne i Seattle og Bombay åbenbart ikke, så de har kodet IEs renderingsmaskine til at border og åbenbart også margin er en del af elementet, hvilket for det sidste jo er noget vrøvl, da man allerede har padding inde i elementet !o]

-- se i øvrigt: http://www.w3.org/TR/REC-CSS2/ under box-modellen (eller hvad det nu hedder !-)
Avatar billede mik789 Nybegynder
07. februar 2004 - 15:29 #3
roenving> "I css-box-modellen, som den er defineret af w3c regnes margin og border ikke med til et elements størrelse, hvorfor de skal lægges udenom elementet."

Ja, det ved jeg godt, men jeg var ikke klar over at marginen så lægges til den omgivende boks - for det er jo det der sker, ser det ud til.
Avatar billede roenving Novice
07. februar 2004 - 15:35 #4
-- ja, det er inde i den omgivende box ?-)

Du har jo en height på 100% på det element (body !-), så der er masser af plads !o]
Avatar billede mik789 Nybegynder
07. februar 2004 - 15:37 #5
forstår jeg dig ret? det der sker er altså at hvis <body> har en height på 100% og jeg min boks har en margin-top på 10% så svarer det til at <body> bliver 110% høj (og derfor får en lodret scrollbar). eller hvad?
Avatar billede mik789 Nybegynder
07. februar 2004 - 15:41 #6
eller rettere, <body> bliver det højere der svarer til 10% af min boks, ikke af <body>, så <body> bliver ikke lige 110%, 100% + 10% af min boks
Avatar billede mik789 Nybegynder
07. februar 2004 - 15:42 #7
, MEN 100% + 10% af min boks
Avatar billede roenving Novice
07. februar 2004 - 15:46 #8
Det er jo åbenbart det, som sker, i hvert fald i Gecko-maskinen, IE gør det jo indenfor den etablerede størrelse ...

Om det er det rigtige at gøre, ved jeg ikke lige, og det er da i hvert tilfælde en underlighed, som man skal tage højde for, hvis man planlægger at bruge margin som en del af en design-strategi !-)
Avatar billede mik789 Nybegynder
07. februar 2004 - 15:49 #9
netop! det er specielt irriterende hvis man tilstræber design uden scrollbars, altså relative design der tilpasser sig vinudet. det var derfor jeg blev opmærksom på det

men tak for hintet. læg et svar ;-)
Avatar billede mik789 Nybegynder
07. februar 2004 - 15:52 #10
for øvrigt, det med at padding-top skubber boksen 2px længere ned sker kun når den er angivet i %'er, så det har noget med procent-udregningen at gøre. det sker ikke når der angives faste mål
Avatar billede roenving Novice
07. februar 2004 - 16:04 #11
Okay ?-)

Det var faktisk også hvad jeg regnede med, da jeg så din kode, men det er jo meget rart at vide !-)

-- og velbekomme '-)
Avatar billede roenving Novice
08. februar 2004 - 06:05 #12
-- og tak for points ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
26/0813:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
White papers
Flere white papers »