in Linktipps

{ box-sizing: border-box } FTW « Paul Irish

Wie mir 1 Zeile CSS ungefähr 3 Stunden Arbeit sparten. Neulich beim Pixelscheucher gelesen und noch gedacht „wann wird man das schon mal brauchen können“ und schon ergab sich die Situation, dass diese kleine Zeile Code mir geschätzte 3 Stunden Arbeit ersparten.

/* apply a natural box layout model to all elements */
* { box-sizing: border-box; -moz-box-sizing: border-box; }

sorgt dafür, dass alle Weiten als absolut sind, und padding, border-radius und Co nicht umständlich abgezogen werden müssen.

Ich habe es für unsere kleine mobile Webapp genutzt, weil ich Inputfelder auf 100% Breite haben wollte, und zwar sowohl im Portrait als auch im Landscape Modus. Wer ähnliches probiert hat, kennt das Problem bestimmt. Der obenstehende Code könnte die Lösung sein

  • Anderer Inhalt mit diesem Tag