HTML適切なdivサイジング

親のdiv width:100%を作成してpadding-right:5%;を適用すると、それはちょうど私がdivにwidth:105%;を作ったようなものになり、その場合にはその横に浮かぶ他のdivに影響しますこのようwidth:70%; padding-right:2%; float:leftHTML適切なdivサイジング

としての我々は、このコード

<div style="width:100%; padding-right:3%;"> text </div>

これは、水平スクロールバーのOが作成されますを持っていると仮定しましょうdivの幅は基本的に100％以上です私の質問は、divのサイズを正しく設定する方法です。実際のdivのpaddingをwidthから減算する必要がありますか？それは私が今やっていることであり、うまくいっていますが、それは最良のアプローチではないと感じています。

出典

2017-07-13 Marwan AK

テキストにインラインタグを追加することができます。すなわち

– jsmean

'box-sizing：border-box'を見てください。 –

ありがとうございました！ –

ただ、要素のスタイルにbox-sizing: border-boxを追加します。

<div style="width: 100%; padding-right: 3%; box-sizing: border-box;"> text </div>

MDNによると：

ボーダーボックスを

幅と高さのプロパティコンテンツ、パディング、ボーダーは含まれますが、余白は含まれません。

出典

2017-07-13 18:54:15

@MarwanAK - インラインスタイル（およびインラインJavaScript）は、サイトの外観の変更を開始する場合に変更が必要な場所の数が爆発的になるため、使用しないでください。 ''ブロックを使用するか、 '.css'スタイルシートファイルを使用することをお勧めします。 –

答えて

関連する問題