box-sizing: border-box funktioniert nicht wie gedacht?!

[Trüffelkrieger]

Hi!

Folgendes: Ich möchte ein kleines Grid-Layout mit Bildern machen. In den großen Viewports sollen da vier pro Zeile erscheinen. Da ich mir die Rechnerei mit width und paddings sparen wollte, habe ich einfach box-sizing: border-box genutzt, aber das klappt aus irgendeinem Grund nicht ganz. Folgendes CSS:

img {
  box-sizing: border-box;
  display: inline-block;
  padding: 0.817757%;
  width: 25%;
}

Jetzt hatte ich eigentlich damit gerechnet, dass vier Bilder in einer Reihe auftauchen, die jeweils 25 Prozent des verfügbaren Platzes einnehmen. Es sind allerdings nur drei Elemente drin, zu sehen in diesem Pen: http://codepen.io/anon/pen/jPNmwE

Eigentlich dachte ich, dass ich das box-sizing-System verstanden hätte, aber jetzt ...
Hat da jemand eine Idee, woran das liegen könnte?

 

[MrMurphy]

Hallo,

Hat da jemand eine Idee, woran das liegen könnte?

Ja, das ist doch klar: Das liegt am "display: inline-block;"

Dadurch werden den img-Elementen einige Eigenschaften von "display: inline;" zugewiesen. Unter anderem (wie bei Worten) ein Abstand zum nächsten Element in der Zeile, der sich nicht beeinflussen lässt. Auch nicht durch das Border-Box-Modell, dafür ist es auch überhaupt nicht vorgesehen.

In einigen Beiträgen wirst du lesen, das dieser Zwangs-Abstand 4px beträgt. Deshalb ist dieser gewollte Abstand unsinnigerweise auch als das "4 px Problem" bekannt. Die 4px stimmen aber nicht, sondern kommen nur bei einem Zoom-Faktor von 100% ungefähr hin.

Heißt: Wenn du mit negativen margins mit -4px oder ähnlichem rumhantierst kann dir das Layout bei anderen Zoom-Faktoren oder speziellen Displays (Retina oder ähnlichen Lösungen) um die Ohren fliegen.

Sinnvoller ist es "display: block;" zu verwenden. Dabei gibt es solche zusätzlichen Abstände nicht.

Gruss

MrMurphy

P.S.

Auf solche Angaben

padding: 0.817757%;

mit so vielen Kommastellen solltest du verzichten. Die sind eher albern, mehr als eine Stelle nach dem Komma hat in über 99% aller Fälle keine Auswirkungen.

 

[Trüffelkrieger]

Wieder was dazu gelernt :) Vielen Dank!