web-dev-qa-db-ja.com

幅を広げずにテキストエリアにパディングを追加するにはどうすればよいですか？

Textarea要素の幅を設定したり、CSSを介してパディングを使用したりするのに問題があります。パディング値は、テキスト領域の幅を変更するようですが、私は変更しません。

これは私のHTMLコードです：

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

そして私のCSSコード：

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

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

ただし、パディング値が期待どおりに機能していないように見えます。 textareaの幅は、要素の境界とそのコンテンツの間にスペースを定義するのではなく、両方向で350px増加します。

私はマージンを「0px auto」に設定してテキストエリアを中央に配置することを検討しましたが、マウスが空のマージンの1つにカーソルを合わせている場合でも、ユーザーがテキストエリアをスクロールできるようにしたいと考えています。同じ理由で、ラッパーとして機能する別のdivを追加することはできません。ユーザーが空の領域に沿ってスクロールできず、余白のないテキスト領域に沿ってしかスクロールできないためです。

誰か助けてもらえますか？

htmlcsstextareapadding
21
木川 炎星

CSSボックスモデル は、ボーダー、パディング、マージンを除くコンテンツの幅として「幅」を定義します。

さいわい、CSS3には新しい box-sizing この動作を変更して、代わりに指定した幅にパディングなどを含めるようにするプロパティ：

box-sizing: border-box;

上記のリンクによると、ほとんどの最近のブラウザー（IE> = 8を含む）はこのプロパティをサポートしていますが、ブラウザーごとに名前が異なります。

51
casablanca

「％」で幅とマージン/パディングを指定すると役立ちます。ここに一例があります-

ライブ@ 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

CSSで指定された幅には、パディングやボーダーは含まれません（W3C仕様による）。それを行う1つの方法は、＃editorの幅を#body-700pxの幅に設定するJavaScriptを使用することだと思いますが、それは少し面倒です...もちろん、マージンを使用してonMouseWheelイベントを#bodyに登録し、それで作業することもできます...

0
Niet the Dark Absol

一部のブラウザーでは、色などを変更するためにプレースホルダーをターゲットにできるため、パディングを追加することもできます。

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