問題タブ [border-box]

テーブルのセルにパディングを追加したいのですが、これによりテーブル内のテキストや入力などがオーバーフローします。他のスタック オーバーフローの議論から、答えは setbox-sizing: border-boxであることがわかりましたが、これはうまくいきません。

以下は、問題を説明するための最小限の例です。

1.5% のパディングを使用すると、入力ボックスはセルの右端からはみ出します。パディングが 0 に変更された場合、入力ボックスはぴったりと収まります。パディングを維持したいが、入力ボックスをフィットさせたい。

高さと幅が指定された div コンテナがあります [たとえば、幅 = 280px & 高さ = 30px]。div には、css 属性を持つテキストボックス [input type=text] が含まれています: box-sizing=border-box & width=100% 2 つの div コンテナーを隣接して配置しましたが、テキストボックス間にスペースがあるはずです。

これは、Chrome と Mozilla で問題なく動作します。ただし、Microsoft Edge はテキスト ボックスを div 全体に広げ、隣接するテキスト ボックスの間にスペースはありません。Box-sizing は Edge によって考慮されないため、全幅が使用されるのではないでしょうか? お知らせ下さい。

要素の高さを初期値から 0px に動的に変更したいのですが、パディングのために機能していないようです。私が間違っていることを言うことはできません。

使用したくない: 表示: ブロックまたは非表示。高さが 0 のときにスタイルからパディングを削除したくないのは、このロジックが複雑になりすぎるためです。ここで愚かで簡単に修正できることを願っています。それが機能しない理由です。何か案は？

より多くのコンテキストのために追加しています。リアクトです。コードを簡略化しましたが、これは基本的な考え方です。そして、このモーダルをサイズ変更可能にしたいと思います。ので、私は持っています ：

問題は、web 開発者ツールで高さを手動で 0px に設定しても、上のスクリーンショットのようにこのパディングのためにこの要素が存在することです。

現在プログラミングの勉強をしていて、簡単なジャンケンゲームを作っています。box-sizing: border-boxこれにより、パディングが追加されたときにボックスのサイズが大きくなるのを防ぐことができると想定して設定しました。しかし、パディングを追加するとボックスが大きくなり、その理由がわかりません。私はこれを期待しcontent-boxます。誰か助けてくれませんか？ありがとうございました。以下のコード:

左側と右側の両方に 1em のパディングがある入力要素があります。しかし、「box-sizing: border-box」を適用しました。ただし、その幅は他の要素よりもまだ大きいです。コードの一部を削除する必要があるためだと思いますが、よくわかりません。他の要素が適切に中央揃えされているため、入力要素は間違いなく1つの問題です。以下はコードです：

それの何が問題なのですか？