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

Question

J'ai rencontré des problèmes pour définir la largeur d'un élément textarea et utiliser le remplissage via CSS. La valeur de remplissage semble changer la largeur de la zone de texte, ce que je préfère ne pas faire.

Ceci 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 semble pas fonctionner comme on pouvait s'y attendre. La largeur de la zone de texte est augmentée de 350 pixels dans les deux directions, plutôt que de définir l'espace entre les bordures de l'élément et son contenu. J'ai juste considéré le centrage de la zone de texte en définissant les marges à "0px auto", mais j'aimerais que l'utilisateur puisse toujours faire défiler la zone de texte si la souris survole l'une des marges vides. Pour la même raison, je ne peux pas ajouter une autre div comme wrapper, car l'utilisateur ne serait pas capable de faire défiler les zones vides mais uniquement le long de la zone de texte sans marge.

Quelqu'un peut-il aider?

Answer 1

Le CSS box model définit la "largeur" ​​comme la largeur du contenu, à l'exclusion de la bordure, du remplissage et de la marge.

Heureusement, CSS3 a une nouvelle propriété box-sizing qui vous permet de modifier ce comportement pour inclure la place padding etc. dans la largeur spécifiée en utilisant:

box-sizing: border-box; 

Selon le lien ci-dessus, la plupart des navigateurs modernes (y compris IE> = 8) supporte cette propriété, mais ils ont des noms différents dans chaque navigateur.

Answer 2

La largeur spécifiée par CSS n'inclut pas de remplissage ou de bordure (conformément aux spécifications du W3C). Je suppose qu'une façon de le faire est avec un peu de JavaScript qui définit la largeur de #editor à la largeur de #body moins 700px, mais c'est un peu brouillon ... Je ne sais pas s'il existe une façon CSS de faire ce que vous voulez ici. Bien sûr, vous pouvez utiliser la marge puis enregistrer l'événement onMouseWheel dans le corps et travailler avec ...

Answer 3

Spécification des largeurs et marges/bourrage dans '%' aide. Voici un exemple -

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

Certains navigateurs vous permettent de cibler l'espace réservé pour changer la couleur, etc., de sorte que vous pouvez ajouter un rembourrage ainsi:

::-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; 
}