BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

divの幅をwidth:100に設定し、親要素を超えるpaddingまたはmarginを設定する場合の解決法

2022-01-08 19:54:26

プリアンブル

CSS3の新プロパティbox-sizingを使って、divにwidth:100を設定した後、親要素を超えるpaddingやmarginを設定する問題を解決する方法を紹介します。

構文 

box-sizing: content-box|border-box|inherit;

値 i. content-box 

CSS 2.1 で規定されている width-height の動作である。

幅と高さは、要素のコンテンツボックスに対して個別に適用されます。

要素の幅と高さに加えて、要素の内側の余白と境界線を描画します。

値2、ボーダーボックス

要素に設定された幅と高さによって、要素のボーダーボックスが決定されます。

つまり、要素に指定された内余白や枠線は、設定された幅と高さの範囲内で描画されます。

コンテンツの幅と高さは、設定された幅と高さから、それぞれボーダーとインナーマージンを引いて得られます。

価値 III. 継承

box-sizing 属性の値を親要素から継承することを指定します。

例 

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>

<div class="container">
<div class="box"> This div occupies the left half. </div>
</div>

</body>
</html>

概要

以上、この記事の内容はすべてです。この記事の内容があなたの勉強や仕事に役立つことを願っています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します