• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] box-sizing: border-box

annsen

Mitglied
Hallo zusammen,

ich verstehe grad das Verhalten der verwendeten Elemente nicht - vielleicht könnt ihr helfen?!?

"box-sizing: border-box" bedeutet für mich, dass die für die Elemente angegebenen Maße (in meinem Fall die Breite (width)) inklusive padding/border/margin gelten. Die Abstände und der Rahmen werden also ggf. mit in die angegebene Elementbreite automatisch eingerechnet.

In meinem Fall funktioniert das aber nicht korrekt und ich weiß nicht warum. Ich habe ein

DIV (flexbox) / Breite 1000px

das enthält

1 Element "figure" (+ img mit border), das 25% Breite zugewiesen bekommen hat
1 DIV (mit 3 enthaltenen p-Elementen), das 75% Breite zugewiesen bekommen hat und einen "margin-left" zum figure-Element von 1rem hat

Wenn ich mir die Elemente jetzt ansehe, ist das Bild 245,85px breit und hoch und das div mit den p-Elementen 738,15px.
Nehm ich margin raus, ist die Aufteilung exakt 250px/750px - so, wie ich es eigentlich erwartet habe.

Der margin scheint da also zu "stören".

Wenn ich das Ganze mit 25% und 50% teste, funktioniert es - die beiden Elemente sind dann auch 25% und 50% breit. Allerdings nehmen die 2 Elemente (wahrscheinlich durch den nicht in den Prozenten enthaltenen margin-Abstand?) sichtbar mehr Platz ein als 75%.

Könnt ihr mir sagen, wo mein Denkfehler ist?

Danke vorab!!
 
Werbung:

Von margin ist dort nicht die Rede, d. h. margin wird wie bisher zur Breite hinzu gerechnet. Dadurch erklärt sich das, was Du beobachtest.

Ja, es sieht ganz so aus.
Allerdings war ich vorab auch auf der von dir angegebenen Seite und im nächsten Absatz heißt es:

1667329620404.png
Das "Auch die Größe von margin wird hinzugefügt..." hat mich dann etwas irritiert.
HIER stehts dann aber nochmal eindeutig(er):

1667329804856.png

"...Inhalt, Innenabstand und Rahmen".

Vielen Dank, für die schnellen Antworten!!
 
Werbung:
Zurück
Oben