{ 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

Weiter zum Artikel

Ich bin Steuermann bei Erdmann & Freunde, einem Netzwerk für Contao-Webworker, und schreibe hier über Themen aus dem Bereich Webdesign und Webentwicklung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *