Anfängerfrage zum Box-Modell CSS

Computer: Software & Programmierung HTML & CSS
#1

Heiho!

Ich mal wieder!
Momentan bin ich immer noch (mehr oder minder fleißig) dabei, XHTML und CSS zu lernen. Bei letzterem bin ich gerade beim Boxmodell. Aber ich komme mit den Erklärungen nicht wirklich klar, weder mit denen in meinen Büchern noch mit der von CSS4you.
Bisher weiß ich Folgendes:

Ganz innen ist der Inhalt, bei dem als einziger width und height angegeben werden müssen. Darum ist „Padding“ (mit den Angaben left, right, bottom, top). Über dem „Padding“ ist der border, was - so ich es richtig verstanden habe, der Rahmen um den Inhalt sein soll. Über dem Border liegt „margin“, das - genauso wie „Padding und Border“ die vier erwähnten Angaben innehat.
Woran ich jetzt hake: Was genau hat es mit „Padding“ und was hat es mit „Margin“ auf sich?

Wäre lieb, wenn mir das jemand so erklärt, das auch ein „Dummie“ wie ich das versteht.

LG und dankeschön im voraus
Michael Vogl

#2

Im Alten Testament …

Wäre lieb, wenn mir das jemand so erklärt, das auch ein

„Dummie“ wie ich das versteht.

… findet sich dazu eine Graphik: http://de.selfhtml.org/css/formate/box_modell.htm

Mehr Graphiken dazu:

http://images.google.com/images?client=opera&rls=de&…

Nun mach doch mal so einen CSS-Container auf, stell mal gut sichtbare Werte für Padding (Futter) und Margin (Rand) ein und dann färbst du mal den Hintergrund, und den Rahmen. Dann wirst du es sehr schön sehen. Was eben gefärbt wird, was nicht, dass der eine Abstand den Text in die Farbfläche setzt, und der andere Abstand die Farbfläche in die Umgebung setzt uvam.

Gruß

Stefan

#3

Hi,

Wie gesagt http://de.selfhtml.org ist natürlich die Bibel für HTML, CSS und Co.

aber ich mach das mal ganz einfach:

Anhand einer div box

in HTML steht:

>

in CSS steht:

#box {
display: block;
width: 100px;
height: 100px;
margin-left: 100px;
margin-top: 100px;
border: 1px;
padding: 5px;
}

-> SO WAS HEIßT DAS ???

display: block;, width: 100px; und height: 100px; dürften dir ja bekannt sein - einfach ne div die als block angezeigt wird und 100px hoch und breit ist.

margin-left: 100px; und margin-top: 100px; sagen das diese div von linken Browserrand und von Obenren Browserrand je 100px entfernd sein soll.
Man hätte auch in CSS einfach nur margin: 100px; schreiben können, hab ich hier aber extra nicht gemacht, damit Du siehst wie margin, border und padding erweitert werden müssen damit sie für eine Seite der box gelten.

border: 1px; sagt das um diese ganze div ein Rand von 1px sein soll.

padding: 5px; sagt das den Inhalt der div auf allen seiten 5px von Rand entfernd sein soll.

wie schon geasgt hättest Du auch padding-left, padding-right, oder auch border-left oder border-top eine eigende weite geben können mit diesen angaben.

hoffe das ich dir helfen konnte,

lg. Meganova

#4

Hallo,

Ganz innen ist der Inhalt, bei dem als einziger width und
height angegeben werden müssen. Darum ist „Padding“ (mit den
Angaben left, right, bottom, top). Über dem „Padding“ ist der
border, was - so ich es richtig verstanden habe, der Rahmen um
den Inhalt sein soll.

Genauer gesagt ist „border“ der sichtbare Rahmen

Über dem Border liegt „margin“, das -
genauso wie „Padding und Border“ die vier erwähnten Angaben
innehat.
Woran ich jetzt hake: Was genau hat es mit „Padding“ und was
hat es mit „Margin“ auf sich?

Stell dir ein Bild vor, das an der Wand haengt. Das Bild selbst ist auf einer gewissen Flaeche (der Inhalt), um das Bild herum ist ein Passepartout (das Padding), dann kommt der Rahmen (border), und neben dem Bild ist noch ein wenig Platz an der Wand, das naechste Bild haengt nicht sofort daneben (das ist das Margin).

Wäre lieb, wenn mir das jemand so erklärt, das auch ein
„Dummie“ wie ich das versteht.

Mit dem Margin stellst du den Abstand zum naechsten Objekt ein, mit dem Padding den Abstand zwischen Inhalt und Border.

Gruesse,
Moritz

#5

Hallo nochmal!

Danke erstmal für die Antworten.
Mit dem Link von Stefan kann ich so rein gar nichts anfangen. Dort wird nur erklärt, wie man die Größe der Box berechnet. Gut, das wußte ich auch schon vorher, nur eben nicht, was Padding und margin bedeuten.
Bei der Gelegenheit: für mich (und ich spreche hier von meiner Person als Anfänger) ist SelfHTML.org eine der schlechtesten Seiten. Soweit ich weiß, steht aber extra geschrieben, dass die Seite für Anfänger ungeeignet ist.
Aber wie gesagt: das ist meine Auffassung. Vielleicht sehe ich das ganze später ganz anders, wenn ich die ganzen Sachen „auf Kette“ habe…:wink:

Mit dem Hinweis von Meganova, das Padding den Abstand zwischen Rahmen und Inhalt angibt und den von Moritz, das Margin den Abstand des Rahmens zur nächsten Box bedeutet, kann ich was anfangen.
Vielen lieben Dank.

LG
Michael Vogl