• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

margin & padding

P

Powerslave

New member
Servus,

wenn ich zwei elemente habe, etwa so:

HTML: 
<div>
 <p>Dies ist ein Text</p>
</div>

Ist es eigentlich immer egal, ob ich im Parentelement padding benutze oder im kindelement margin?
 
Moin!
Powerslave schrieb:
Ist es eigentlich immer egal, ob ich im Parentelement padding benutze oder im kindelement margin?
Zum Vergrößern anklicken....
Nö! Probier's doch einfach mal aus. So haben p's z. B. einen sehr hohen, allerdings je nach Browser unterschiedlichen Vorgabewert für margin. Packst Du also ein p ohne margin-Angabe in ein div mit padding:10px ergibt sich ein viel größeres Gesamtkonstrukt als wenn der p-Tag 10px margin erhält und der Mama-div nix...

Ahoi - Pit
 
Stimmt.
Aber deswegen packt man ja auch immer ein margin:0px + padding:0px in den body bzw html...
 
dkdenz schrieb:
Stimmt.
Aber deswegen packt man ja auch immer ein margin:0px + padding:0px in den body bzw html...
Zum Vergrößern anklicken....
Konnte ich bei Powerslave's Beispiel nich sehen, deswegen dachte ich mir: sach's mal... :D

Ahoi - Pit
 
abend,

habs jetzt mal getestet und folgendes festgestellt:

wenn ich im parent-element padding auf 0px setze sitzt zwar das <p> links und rechts genau, aber oben und unten sind ca 20px abstand bis zum div rahmen.

wenn ich aber beim <p> margin auf 0px setze sitzts genau drin. Gibts dafür erklärung?

hier der code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Your Title Here </title>
<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">
</head>

<body style="margin:0px; padding:0px">
	<div style="border:1px solid #000; margin:10px;">  
		<p style="padding:50px 25px; border:1px solid #abc; text-align:justify; margin:0px">
		Ora et laborabora Ora et labora Ora et labora 		Ora et laborabora Ora et labora Ora et labora 
		Ora et laborabora Ora et labora Ora et labora 		Ora et laborabora Ora et labora Ora et labora 
		</p> 
	</div>
</body>
</html>
 
Aus deinem Code läßt sich nicht ersehen, was du genau meinst?
Welches Problem solll dieser Code darstellen?

Evtl. (ich putze gerade meine Glaskugel) liegt dein Propblem auch am IE Boxmodell bug, solange du keine gültige DTD benutzt ist der IE 6 im Quirksmodus und stellt dort das CSS fehlerhaft da. Allerdings hast du noch nicht gesagt welchen Browser du benutzt
 
Also:

1) Browser: IE / Firefox, oben genannte Problem ist in beiden gleich.
2) du siehst doch diese zeile: <p style="padding:50px 25px; border:1px solid #abc; text-align:justify; margin:0px">
wenn du hier nun das margin rausnimmst und eine Zeile drüber im div ein padding:0px reinmachst, siehst du
den Unterschied.

3) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ist doch gültig?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben