web-dev-qa-db-fra.com

Comment puis-je ajouter du rembourrage à une zone de texte sans augmenter la largeur?

J'ai eu du mal à définir la largeur d'un élément textarea et à utiliser un remplissage via CSS. La valeur de remplissage semble changer la largeur de la zone de texte, ce que je préférerais 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;
}

Toutefois, les valeurs de remplissage ne semblent pas fonctionner comme prévu. La largeur de la zone de texte est augmentée de 350 pixels dans les deux sens, plutôt que de définir un espace entre les bordures de l'élément et son contenu.

J'ai envisagé de centrer la zone de texte en définissant les marges sur "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 d’autre div à faire office de wrapper, car l’utilisateur ne pourrait pas faire défiler les zones vides, mais seulement le long de la zone de texte sans marge.

Quelqu'un peut aider?

htmlcsstextareapadding
17
木川 炎星

Le modèle de la boîte de dialogue CSS définit "largeur" ​​comme largeur du contenu, à l'exclusion des bordures, des marges et des marges.

Heureusement, CSS3 a une nouvelle propriété box-sizing qui vous permet de modifier ce comportement pour inclure à la place le remplissage, etc., dans la largeur spécifiée à l'aide de:

box-sizing: border-box;

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

49
casablanca

Spécifier les largeurs et les marges/marges 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%;
}
1
Ninad

La largeur spécifiée par CSS n'inclut pas le remplissage ni la bordure (conformément aux spécifications du W3C). J'imagine qu'une façon de le faire est d'utiliser du code JavaScript qui définit la largeur de #editor sur celle de #body moins 700px, mais c'est un peu compliqué ... Vous ne savez pas s'il existe un moyen de faire ce que vous voulez ici. Bien sûr, vous pouvez utiliser margin puis enregistrer l'événement onMouseWheel dans #body et travailler avec cela ...

0
Niet the Dark Absol

Certains navigateurs vous permettent de cibler l’espace réservé pour modifier la couleur, etc., afin que vous puissiez également ajouter du rembourrage:

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