Comment puis-je ajouter un remplissage à une zone de texte sans augmenter la largeur?

J'ai eu de la difficulté à mettre un textarea élément de la largeur à l'aide de rembourrage via CSS. La valeur de remplissage semble changer la largeur de la textarea, je préférerais qu'il ne peut pas faire.

C'est mon code HTML:

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

Et mon code CSS:

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

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

Cependant, les valeurs de remplissage ne semblent pas fonctionner comme prévu. La largeur de la textarea est augmenté par 350px dans les deux directions, plutôt que de définir l'espace entre les bordures de l'élément et son contenu.

J'ai considéré comme juste centrer le textarea en définissant les marges à "0px auto", mais je tiens à l'utilisateur de toujours être en mesure de faire défiler le textarea si le curseur de la souris sur l'une des marges vides. Pour la même raison, je ne peux pas ajouter une autre div pour agir comme un wrapper, en tant que l'utilisateur ne serait pas en mesure de naviguer dans les zones de vide, mais seulement le long de la marge-moins textarea.

Quelqu'un peut-il aider?

source d'informationauteur