css - パディング付きの 100% 幅の入力

Question

左右のパディングが 10px で、親と同じ幅の textarea/input を作成する方法。

textarea,input{
    padding:5px 10px 5px 10px; 
    width:100%;
}

その場合、入力はより広くなります。

Answer 1

    textarea{
        box-sizing: border-box;
        width:100%;
        padding: 10px
    }

Answer 2

ああ、古き良きボックスモデル。パディングは幅に追加されるため、目的の効果を得るには、パディングにもパーセンテージを使用する必要があります。これを試して：

textarea, input {
   padding: 1% 2% 1% 2%;
   width: 96%;
}

Answer 3

関連する質問で私の答えを確認できます

jsFiddleのデモ：

HTMLマークアップ：

<div class="input_wrap">
    <input type="text" />
</div>

CSS：

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Answer 4

css コードに margin プロパティを追加します。