Padding - Wasn da los?

[allyinthespace]

Hallo!
Hab seit langem nichtmehr Programmiert und bin jetzt dabei im Praktikum ne Website zu programmiern.
Früher hatte ich nie so ein Problem, eventuell hab ich da vielleicht ne blöde Kleinigkeit vergessen, aber auf jeden Fall krieg ich das mitm Padding nicht so wie es sein soll hin, dass der Text in meiner div-box weiter innen steht. Wenn ich einen Wert von z.B. 15px eingebe, dann wird die Box automatisch erweitert .
Ich weiß, ist bestimmt ne dumme Frage, aber bin noch so ziemlich n Anfänger, steck inner Ausbildung und da kommt so was ab und zu mal vor.. Hmm


Danke im vorraus!

[Bububoomt]

Welcher Browser?

Leider verhalten sich nciht alle Browser gleich.
Eventuell mußt du Browserweichen bauen und für diesen dann die Breite um 15px verringern.

[allyinthespace]

Es handelt sich um Firefox, hab deinen Tip, mit dem verringern umgesetzt! Jetzt hat alles die richtige Breite. Dankeschön!
Thema kann dann geschlossen werden!

[Lokutos]

Die breite des elements errechnet sich durch

Width + margin + padding

ist ganz normal.

[t-rink]

Wenn du einem Element eine feste Breite gibst, dann musst du den Kindelementen das padding geben.


Also beispielsweise so:

1:
2:
3:
4:
5:
<div id="mein-div">
    <p>lorem</p>
</div>

#mein-div p { padding: 15px;}

Wenn du das padding nun auf #mein-div anwendest, dann hast du das was du bislang hast. Wenn du allerdings jetzt das padding auf #mein-div p {} legst, dann sollte das so sein, wie du dir das vorgestellt hast, oder?

[Gsus]

Hallo,

schau dir zur Verdeutlichung am besten einfach mal dieses Bild an:


Die Gesamtbreite deine Box errechnet sich aus:
2xmargin (rechts&links) + 2x border(rechts&links) + 2x padding(rechts&links) + width

mfg
Gsus

[Kralle93]

Schau dir das Padding-Box-Model an

Hier ein Beispiel, wie du es machen musst:
Div - 500px Breite und Höhe
div#box{
width: 460px;
height: 460px;
padding: 20px;
}

Padding: Rechts, Links, Oben und unten 20px Breite. Diese musst du auch von der Breite oder Höhe abziehen.

Und direkt auf richtige Deklaration achten, der IE kann im Quirks-Modus Padding nicht richtig verstehen...

[joschilein]

Zitat von Kralle93

Schau dir das Padding-Box-Model an

Welches denn? Es gibt eben nicht das Box Model, sondern eigentlich 4, also vier verschiedene Arten width oder height zu definieren: Nur Inhalt, bis Padding, bis Border und bis Margin. Alle sind mehr oder weniger logisch und so haben sich verschiedene Browserhersteller eben für das eine oder andere entschieden.

Mit box-sizing in CSS3 wird das auch endlich halbwegs steuerbar. Und ich hoffe sehr, dass das Thema in ein paar Jahren durch ist und unterstützende Browser auch beim letzten Anwender benutzt werden.

[Kralle93]

Zitat von joschilein

Welches denn? Es gibt eben nicht das Box Model, sondern eigentlich 4, also vier verschiedene Arten width oder height zu definieren: Nur Inhalt, bis Padding, bis Border und bis Margin. Alle sind mehr oder weniger logisch und so haben sich verschiedene Browserhersteller eben für das eine oder andere entschieden.

Das Padding-Box Modell natürlich.