nicht angemeldet
margin=0 padding=0 auf body und html wirkt nicht auf zb. h1
0 0 
Gunnar Bittersmann
0 
MudGuard
margin=0 padding=0 auf body und html wirkt nicht auf zb. h1
Hallo,
der folgende Code müsste doch eigentlich margin und padding aller Elemente einer Seite auf NULL setzen:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
html,body{margin:0px;padding:0px;}
body{
background-color:#ffffff;
font-size:12px;
}
#head{
background-Color:red;
}
#main{
background-color:#f6f6f6;
}
</style>
</head>
<body>
<div id="head"><h1>test</h1></div>
<div id="main">blabla blabla</div>
</body>
</html>
Ist aber nicht so, weder IE noch FF. <h1> erzeugt in diesem Fall einen Abstand von oben. seltsam, dass dadurch auch der div.headbereich leidet und komplett heruntergezogen wird anstatt nur h1. Aber das ist nicht die Frage, sondern:
html,body{margin:0px;padding:0px;}
Alle anderen Elemente sind doch untergeordnet, warum wirkt sich das dann nicht aus? Außerdem wurde und wird diese Auszeichnung auf unzähligen Seiten, eben aus diesem Grund empfohlen und funktionierte früher auch problemlos.
html,body,h1{margin:0px;padding:0px;}
so geht es, aber warum muss ich jetzt noch explizit angeben, dass h1 margin und padding = 0 ist?
Gruss
Mike
-
Hallo, (Ergänzung)
beantwortet zwar meine Frage nicht aber mir ist gerade aufgefallen, dass der Fehler bei vielen meiner Seiten nicht auftritt, weil ich dort so vorgegangen bin:
*{margin:0px;padding:0px;}
Hatte ich schon komplett vergessen.
-
@@Mike:
nuqneH
html,body{margin:0px;padding:0px;}Weder margin noch padding werden vererbt: „Inherited: no“.
<div id="head"><h1>test</h1></div>
Dafür gibt es in HTML das header-Element. Blog: neue Elemente für die Seitenstruktur
<div id="main">blabla blabla</div>
Dafür gibt es in HTML das main-Element.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo,
ja das mit dem vererben habe ich immer vernachlässigt, weil es mir zu unlogisch erschien(dieses wird vererbt, andere Eigenschaft wiederum nicht...). Auch dass die Auszeichnung dann zum betreffenden Element gemacht werden muss also h3{nimm die Eigenschaften von div#idxy}, anstatt dem div zu sagen, #idxy {vererbe alle Eigenschaften an Elemente die sich in dir befinden} hätte ich übersichtlicher und einfacher empfunden.
Egal, Grund war also die Vererbung, dank an euch. Nutzen werde ich diese inherit Bezeichnungen allerdings nicht, denn mit dem Universalplatzhalter *{} bin ich weitaus besser bedient.
Dafür gibt es in HTML das header-Element. Blog: neue Elemente für die Seitenstruktur
Dafür gibt es in HTML das main-Element.
Ja, von diesen neuen Elementen weiss ich noch nicht genau was ich davon halten soll. Dieser Drang zur seperaten Deklarierung und somit eine XML-ähnliche Strukturierung wird ja schon seit Jahren propagiert. Doch einfacher machte es das Ganze nie und der Effekt, dass es dadurch übersichtlicher sein soll, im Grunde auch nicht.
Ich habe mir mal eine Zeitlang angewöhnt, das so selfhtml-konform wie möglich zu machen, also Tabellen mit head und Body auszuzeichnen und Forms mit Labels, aber trotz gewisser Vorteile konnte und wollte ich mich nie daran gewöhnen, wie offensichtlich viele andere Webseitenersteller auch. Deshalb glaube ich auch in Zukunft die neuen Elemente nicht einzusetzen, wenn ich nicht muss, aber wer weiß, sag niemals nie...
Gruss
Mike-
@@Mike:
nuqneH
Ja, von diesen neuen Elementen weiss ich noch nicht genau was ich davon halten soll. Dieser Drang zur seperaten Deklarierung und somit eine XML-ähnliche Strukturierung wird ja schon seit Jahren propagiert.
Das hat mit XML nichts zu tun.
Doch einfacher machte es das Ganze nie und der Effekt, dass es dadurch übersichtlicher sein soll, im Grunde auch nicht.
Doch, das Dokument wird übersichtlicher: Für Nutzer von Screenreadern beispielsweise.
Bei
<div id="header">,<div id="nav">,<div id="main">können sie nicht unterscheiden, dass in den Containern verschiedenartige Inhalte stecken.Bei
<header>,<nav>,<main>können sie das. (Zumindest zukünftig. Momentan sollte man noch<main role="main">schreiben.)Aber auch für den Entwickler ist es übersichtlicher. Bei
</div> </div> </div>muss man schon genauer hinkucken, welcher Container da jeweils geschlossen wird. Bei
</footer> </section> </main>hingegen wird’s sofort klar.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
Hi,
Ist aber nicht so, weder IE noch FF. <h1> erzeugt in diesem Fall einen Abstand von oben.
Wegen der fehlenden Vererbung.
seltsam, dass dadurch auch der div.headbereich leidet und komplett heruntergezogen wird anstatt nur h1.
Wegen der Collapsing Margins.
html,body{margin:0px;padding:0px;}
Alle anderen Elemente sind doch untergeordnet, warum wirkt sich das dann nicht aus?Fehlende Vererbung, s.o.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.