Textarea und Eingang unterschiedliche Breiten

Question

CSS:

textarea, input { 
    width:300px; 
} 

HTML:

<textarea id="input"></textarea> 
<br> 
<input type="submit"> 

Live Demo: http://codepen.io/qaz/pen/teaiG

Warum die Eingabe und Anzeige Textbereich mit verschiedenen Breiten? Welche Eigenschaften muss ich hinzufügen, um sie auf die gleiche Breite zu bringen?

UPDATE: Durch Festlegen von Rahmen und Padding auf 0px, kann ich sie auf der gleichen Breite anzeigen lassen. Niemand möchte padding: 0px, und seltsamerweise, wenn das Padding ist, sagen wir, 10px für beide, sie sind nicht mehr die gleiche Breite. Jetzt, wo ich eine Lösung mit Padding gefunden habe: 0px, bin ich immer noch an einer Erklärung und einer Lösung interessiert, die es mir erlaubt, noch Padding zu haben.

(Ich bin mit Chrome 35 auf Windows 7.)

Answer 1

Probieren Sie es wie Sie diese Einstellung:

textarea, input { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

http://jsfiddle.net/QV9PE/

Die Box-Sizing CSS3-Eigenschaft kann genau dies tun. Der Rahmen-Box-Wert (im Gegensatz zum Standard-Inhalt-Box) macht die letzte gerenderte Box die deklarierte Breite, und jede Grenze und Padding Schnitt innerhalb der Box.

Wir können jetzt unser Textfeld mit einer Breite von 300 Pixeln sicher deklarieren, einschließlich pixelbasierter Padding und Rahmen, und perfektes Layout erreichen.

Answer 2

Versuchen Sie, die folgende CSS und HTML. Ich habe nicht die theoretische Antwort kennen, aber hier ist eine praktische Lösung: http://codepen.io/anon/pen/BGeci

CSS:

textarea, input { 
    width:300px; 
} 

input[type=submit] { 
    width:306px; 
} 

HTML:

<textarea id="input"></textarea><br> 
<input type="text" id="input2"></textarea><br> 
<input type="submit">