DIV schießt über den Rand

[Gauner]

Hallo

Wenn ich z.B. einem DIV eine feste Größe per CSS gebe, z.b. 100 x 100 und dann per CSS ein Padding von 5 Pixel gebe, dann wird das DIV ja quasi "gesprengt", also es vergrößert sich automatisch um jeweils 5px.

Muss ich .height und .witdh jetzt tatsächlich jeweils um 5 Pixel erweitern oder gibt es da einen CSS-Trick?

 

[threadi]

Der Innenabstand wird genauer gesagt zur Breite und Höhe addiert. Da wird nichts gesprengt.

Du hast 2 Möglichkeiten:
a) Setze den Innenabstand nicht bei dem Blockelement selbst sondern bei einem Kindelement innerhalb von diesem.
b) Verzichte auf das Padding :)

 

[Efchen]

Wenn ich z.B. einem DIV eine feste Größe per CSS gebe, z.b. 100 x 100 und dann per CSS ein Padding von 5 Pixel gebe, dann wird das DIV ja quasi "gesprengt", also es vergrößert sich automatisch um jeweils 5px.

Nein, wenn Du das als "sprengen" ansiehst, dann stimmt Deine Vorstellung vom CSS Box Model nicht.
Das Verhalten ist richtig so.

Die Größe eines Elements errechnet sich aus margin x2 + border x2 + padding x2 + width/height

Wenn Dein Internet Exploder nicht so arbeitet, hast Du ihn warhscheinlich mit einem falschen Doctype in den Quirks Mode geschaltet. Da hält er sich dann nicht an die W3C-Standards.

 

[Gauner]

Danke euch für die Antworten!

Da habe ich wohl falsch gedacht, denn bei einer z.B. 100 x 100px großen Tabellenzelle ist es ja auch nicht so, daß sie durch ein gesetztes Padding größer wird. Ich wollte halt, daß der Inhalt nicht direkt am Rand anfängt. Aber gut, dann muss ich das halt mit einkalkulieren und das Padding vom DIV abziehen :)

 

[Efchen]

Doch. Das gilt für jedes Element.

 

[Elroy]

Danke euch für die Antworten!
Ich wollte halt, daß der Inhalt nicht direkt am Rand anfängt. Aber gut, dann muss ich das halt mit einkalkulieren und das Padding vom DIV abziehen :)

Warum gibst du dann nicht deinem Inhalt das padding?
Oder habe ich da jetzt was falsch verstanden?

Gruss
Elroy

 

[Gauner]

Warum gibst du dann nicht deinem Inhalt das padding?

Was dann aber ein Margin wäre :)

Nö, aber hat sich schon erledigt. Ich habe das Padding einfach vom Div abgezogen.

Das war mir aber echt neu, daß ein Padding die Box wachsen lässt. Bestimmt, weil ich immer nur ein bisschen hinzugefügt habe, vielleicht so 2-3 Pixel, damit es nicht direkt am Rand anfängt. Diesmal hatte ich aber 25 Pixel Padding, was rechts und links dann ja 50 ergibt. Da fällts dann sofort auf :)

EDIT: Ein Erledigt-Präfix wäre hier nicht schlecht...

 

[Efchen]

Das war mir aber echt neu, daß ein Padding die Box wachsen lässt.

Genauso wie ein margin und ein border.
Das sind essenzielle CSS-Grundlagen, die man einfach beherrschen muss!
CSS Box Model