0

入力があり、主な情報には次の 2 つのプロパティがあります。

    #answer_user_answer{

    display: inline-block;
    text-align:center;
    font-size: 15px;
    margin-bottom: 0;
    border: solid 1px;
    outline: none;
    padding: 2px 5px 2px 5px;
    width: 100px;
}

しかし、Chrome 開発者ツールで実際の幅を見ると、112px です。

100+5+5=110 追加の 2 ピクセルとは?

(送信時のこれらのフォームは、他の要素のシフトを引き起こさないように、まったく同じ幅の要素に置き換える必要があります。そのための特別な JS 関数を作成したくありません。他のブラウザが追加の 4,6 ピクセルを挿入しないでください)。

4

3 に答える 3

2

余分な 2 ピクセルは境界線です。

これは、要素の幅や残りのスペースなどを計算する際に問題になる可能性があります。

ボーダーとパディングがボックス内に含まれるようにボックスモデルを切り替えるオプションがあり、これはこれに役立ちます:

要素の CSS で指定するbox-sizing:border-box;と、要素の合計幅は正確に 100 ピクセルになります。境界線とパディングは固定幅の内側に押し込まれ、ボックスの外側の要素にサイズを追加するのではなく、ボックスの内側のスペースを占有します。

それが役立つことを願っています。

于 2013-06-15T10:21:57.953 に答える
1

プロパティを使用box-sizingします。

#answer_user_answer {
    ...
    box-sizing: border-box;
    ...
}

のデフォルト値はbox -sizingですcontent-box。の場合content-box、 anypaddingとborder要素に指定すると、その幅が追加されます。そう

100px + 5px + 5px + 1px + 1px
-----   ---------   ---------     gives 112px
width    padding      border
于 2013-06-15T10:20:33.423 に答える
0

ほとんどの場合、それは a によるものborderです。これ以上コードを投稿しないと、理解するのは困難です。

Vucko が提案したように、CSS リセットファイルを検討する必要があります。

リセットされた CSS ファイルを適用した後、Chrome または Firefox でコードを検査すると、いくつかの違いに注意する必要があります。

于 2013-06-15T10:12:01.583 に答える