html5, css, Skalierbare Bilder nebeneinander mit Padding

[afr0kalypse]

Moinsen. Ich stehe gerade auf dem Schlauch...
Ich habe 2 figure Elemente in denen sich jeweils 1 img Element befindet. Die figure Elemente sollen zu 50% nebeneinander stehen, responsive / skalierbar sein und die Bilder sollen einen festen Abstand von einander haben und mit skalieren.
Hier mein derzeitiges Beispiel: http://jsfiddle.net/C967y/18/
Ich dachte mir, wenn ich dem figure Element 50% Breite und 10px Padding (Innenabstand) gebe, dass dann das img Element davon beeinflusst wird und sich bei 100% Breite um 10px verkleinert... tuts aber nicht, soll es aber... Ist das überhaupt möglich? Wo ist mein Denkfehler?

Edit: eine Lösung habe ich: http://jsfiddle.net/CgLn5/4/
Aber eine Erklärung für den beschriebenen Fehler suche ich trotzdem noch

VG

 

[DaKKK]

Ist ganz einfach. Es liegt am Boxmodell. Dabei werden Padding und Margin zur angegebenen Breite hinzugerechnet. Also deine 50% und dann nochmal die 10px. Dabei kommen natürlich mehr als 100% raus und es passt somit nicht in eine Zeile.

Bei box-sizing:border-box; sind der Rahmen und Padding in der Breite enthalten und lediglich Margin wird hinzugerechnet.

Setze dich einfach mit dem Boxmodell auseinander, dann wird alles klar.

edit: http://www.css4you.de/wsboxmodell/
Hier wird es verständlich erklärt.

 

[cebito]

Ok, DaKKK sagt es schon. Lies dich mal zum Unterschied der Boxmodelle ein. Ich wollt eigentlich nur noch anmerken, dass es besser ist das Padding auch in Prozenten anzugeben. So bleibt das Verhältnis von Bildgrößen und Abständen gleich und macht das Erscheinungsbild bei jeder Größe harmonisch.

 

[hub]

Moin moin,
in deinem ersten Versuch wird das Padding auf die 50% addiert, also 50% + 20px. Abhilfe wäre z.B. einen weiteren Div-Container mit dem Padding um deine Images,und die äusseren Container ohne Padding und Margin "nur" zum anordnen. Oder aber eben so, wie du es in deinem 2. Versuch gemacht hast - der Effekt ist dann der gleiche.

Gruß Ulli

 

[Myhar]

Du könntest es auch mit dem flexbox-Modell versuchen, wenn dir die Unterstützung für ältere browser (hauptsächlich IE) nicht so wichtig ist.

 

[afr0kalypse]

Danke für die Antworten. Ich dachte die 50% bilden den Außenabstand und das Padding den reinen Innenabstand, sodass Child-Elemente dadurch verkleinert werden.