css - cssを使用してdivの外幅を設定する

Question

パディングとボーダーを無視する outerwidthためのdiv使用法を設定する方法があるのだろうか。css

幅を幅に設定するdivと、50%幅にパディングと境界線が追加されます。どうすればそれを解決できますjavascriptかjQuery.outerWidth()？

余分な要素を使用したくない

Answer 1

あなたの中に別divのものを入れ子にして、入れ子になったものにパディング/ボーダーを適用します：

<div style="width:50%;"> <div style="padding:5px;">  ....  </div> </div>

残念ながら、それを実現するための純粋なCSSの方法はありません（または少なくとも私はそれを認識していません）。

Answer 2

これ以上要素を追加したくないので、質問に少し違った答えをしたくないと思います。

1. em や % などの相対的な単位の実際のサイズは、スタイルシートではなくブラウザによって決定されます。
2. 計算されたデータをブラウザーの内部レイアウト エンジンからスタイルシートに戻す一般的/標準的なメカニズムはありません (これは危険なループの問題になる可能性があります)。

本当に、これを行う唯一の方法は次のとおりです。

1. 固定幅サイズを使用し、スタイルにピクセル計算を追加します。
2. 結果を得るには、JavaScript または関連するフレームワークを使用します。

Answer 3

可能であれば、そのdiv内にdivを追加するだけです。

<div id="outerwidth">
  <div class="inner">
   //Content
  </div>
</div>

.outerwidth { width: 50%; }
.inner { padding: 20px; }

Answer 4

次のように、幅に割り当てられた 50% の値を分割できます。

width: 46%;

margin: 0 1%; // 0 top/bottom and 1% each for left and right

padding: 0 1%; // same as above

必要に応じてパーセンテージを再計算できますが、合計が 50% であれば問題ありません。

小さな表面上の問題を修正するために js を使用することは避けます。これは、js をオフにすると機能せず、クライアントのブラウザーに余分な負荷がかかるためです。モバイルについて考えてみると、なぜパフォーマンスが重要なのかがわかります。