問題タブ [box-sizing]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - ボックスのサイズ変更にもかかわらず表のセルがオーバーフローする: border-box
テーブルのセルにパディングを追加したいのですが、これによりテーブル内のテキストや入力などがオーバーフローします。他のスタック オーバーフローの議論から、答えは setbox-sizing: border-boxであることがわかりましたが、これはうまくいきません。
以下は、問題を説明するための最小限の例です。
1.5% のパディングを使用すると、入力ボックスはセルの右端からはみ出します。パディングが 0 に変更された場合、入力ボックスはぴったりと収まります。パディングを維持したいが、入力ボックスをフィットさせたい。
html - なぜ私の要素のコンテンツ領域が親要素の外に出る?
注: wordpress 環境の Salient テーマからコードを抽出しようとしてきたため、問題を最も単純な形式で再現することはまだできていません。この質問がコミュニティにとって有益なものになることを願っています。
これまでのところ、私の問題は以下のとおりです。
コンテンツが画面に表示される方法をより適切に制御しようとしていますが、CSS について理解していないようです。要素の合計幅の計算にパディングとボーダーを含む「box-sizing: border box」プロパティを使用してみました。入力要素とスパン要素の状態を表示するリンクを追加しました
「Chrome Devtool」Span要素コンテンツエリア
問題はマージン関連の問題であるため、ボックスのサイズ変更は機能しないと思います。私の推測では、「margin-left」プロパティがコンテンツ領域全体に影響を与え、コンテンツを span 要素の外に押し出しているということです。ただし、入力要素をスパン要素内に含める必要があります
Lucien Dubois のおかげで HTML と CSS を追加
css - ここでボックスサイジングが適用されないのはなぜですか?
box-sizing: border-box のテーブル セルがあります。つまり、width: 100px を指定すると、境界線が含まれます。このセルには、幅が 16px とボーダーボックスが設定されています。それでも、要素は 26px 幅でレンダリングされます。 https://i.gyazo.com/e35d849169ecfa59ba2f548e28033c52.png
何が欠けている/見落としていますか?