Textarea e ingresso hanno diverse larghezze

Question

CSS:

textarea, input { 
    width:300px; 
} 

HTML:

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

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

Perché il display di input e textarea con diverse larghezze? Quali proprietà devo aggiungere per renderle della stessa larghezza?

AGGIORNAMENTO: Impostando il bordo e il riempimento su 0px, è possibile visualizzarli alla stessa larghezza. Nessuno vuole il padding: 0px, però, e, stranamente, quando il padding è, diciamo, 10px per entrambi, non hanno più la stessa larghezza. Ora che ho trovato una soluzione con padding: 0px, sono ancora interessato a una spiegazione e una soluzione che mi permetta di avere ancora il padding.

(sto usando Chrome 35 su Windows 7.)

Answer 1

Provate ad impostare in questo modo:

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

http://jsfiddle.net/QV9PE/

La proprietà CSS3 per il ridimensionamento delle scatole può fare proprio questo. Il valore del riquadro di confine (in contrapposizione al valore predefinito della casella di contenuto) rende la casella di rendering finale la larghezza dichiarata e qualsiasi taglio di bordo e spaziatura all'interno della casella.

Ora possiamo tranquillamente dichiarare che la nostra area di testo ha una larghezza di 300 px, compresi il riempimento e il bordo basati su pixel, ed eseguire perfettamente il layout.

Answer 2

provare il seguente CSS e HTML. Non so la risposta teorica, ma qui è una soluzione pratica: 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">