Come posso aggiungere padding a una textarea senza aumentare la larghezza?

Question

Ho riscontrato problemi nell'impostare la larghezza di un elemento textarea e utilizzare il riempimento tramite CSS. Il valore del padding sembra cambiare la larghezza della textarea, che preferirei che non lo facesse.

Questo è il mio codice HTML:

<div id="body"> 
    <textarea id="editor"></textarea> 
</div> 

E il mio codice CSS:

#body { 
    height:100%; 
    width:100%; 
    display:block; 
} 

#editor { 
    height:100%; 
    width:100%; 
    display:block; 
    padding-left:350px; 
    padding-right:350px; 
} 

Tuttavia, i valori di padding non sembrano funzionare come ci si aspetterebbe. La larghezza della textarea è aumentata di 350 px in entrambe le direzioni, piuttosto che definire lo spazio tra i bordi dell'elemento e il suo contenuto.

Ho preso in considerazione solo il centraggio dell'area di testo impostando i margini su "0px auto", ma vorrei che l'utente fosse ancora in grado di scorrere la textarea se il mouse passa con il mouse su uno dei margini vuoti. Per lo stesso motivo non posso aggiungere un altro div per fungere da wrapper, in quanto l'utente non sarebbe in grado di scorrere lungo le aree vuote ma solo lungo la textarea senza margini.

Qualcuno può aiutare?

Answer 1

Il CSS box model definisce "larghezza" come larghezza del contenuto, escluso bordo, riempimento e margine.

Fortunatamente, CSS3 ha un nuovo box-sizing proprietà che consente di modificare questo comportamento per includere invece imbottitura ecc nella larghezza specificata utilizzando:

box-sizing: border-box; 

Secondo il link qui sopra, la maggior parte dei browser moderni (tra cui IE> = 8) supporta questa proprietà, ma hanno nomi diversi in ogni browser.

Answer 2

La larghezza specificata dal CSS non include padding o bordo (in conformità con le specifiche W3C). Immagino che un modo per farlo sia con qualche JavaScript che imposta la larghezza di #editor sulla larghezza di #body meno 700px, ma è un po 'disordinato ... Non sono sicuro se c'è un modo CSS di fare ciò che vuoi qui. Naturalmente, è possibile utilizzare il margine, quindi registrare l'evento onMouseWheel sul #body e lavorare con questo ...

Answer 3

Specificare larghezza e margini/riempimento in '%' aiuta. Ecco un esempio -

Live @http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body { 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
    display:block; 
} 

textarea#editor { 
    border:none; 
    width:80%; 
    height:100%; 
    margin-left:10%; 
    margin-right:10%; 
} 

Answer 4

Alcuni browser consentono di indirizzare il segnaposto per cambiare il colore, ecc, in modo da poter aggiungere imbottitura così:

::-webkit-input-placeholder { /* WebKit browsers */ 
    padding: 5px 0 0 5px; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    padding: 5px 0 0 5px; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    padding: 5px 0 0 5px; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    padding: 5px 0 0 5px; 
}