【CSS3】-ボックスモデルのマージン、パディング、border_html/css_WEB-ITnose

ボックス モデル - 境界線

ボックス モデルの境界線は、コンテンツとパディングを囲む線です。この線の太さ、スタイル、色 (境界線の 3 つの属性) を設定できます。

たとえば、次のコードは、境界線の太さ 2px、ソリッド スタイル、赤色の境界線を設定する div です:

div{    border:2px  solid  red;}

上記は境界線コードの省略形で、次のように記述できます。個別に:

div{    border-width:2px;    border-style:solid;    border-color:red;}

注:

1. ボーダー スタイル (ボーダー スタイル) の一般的なスタイルは次のとおりです:

点線 (破線) | 実線 (実線)。

2. border-color (境界線の色) の色は、次のように 16 進数の色に設定できます。

border-color:#888;//前面的井号不要忘掉。

3. border-width (境界線の幅) の幅も次のように設定できます。 | 中 | 太さ (ただし、あまり一般的ではありません)、ピクセル (px) が最も一般的に使用されます。

Box Model--Padding

要素のコンテンツと境界線の間の距離を設定できます。これは「パディング」と呼ばれます。塗りつぶしは上、右、下、左（時計回り）に分けることもできます。次のコード:

rrree

順序を混同しないでください。上記のコードは個別に記述することができます:

div{padding:20px 10px 15px 30px;}

上、右、下、左のパディングがすべて 10 ピクセルの場合は、次のように記述できます

div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}

上と下のパディングが同じ 10 ピクセルの場合、左右のパディングは同じ 20px で、次のように書くことができます:

div{padding:10px;}

Box model--border

要素と他の要素の間の距離は、margin を使用して設定できます。境界は、上、右、下、左に分割することもできます。次のコード:

div{padding:10px 20px;}

は個別に記述することもできます:

div{margin:20px 10px 15px 30px;}

上、右、下、左の境界線が両方とも 10 ピクセルの場合は、次のように記述できます。同じ 10px、左右の境界線は同じ 20px、次のように書くことができます:

div{   margin-top:20px;   margin-right:10px;   margin-bottom:15px;   margin-left:30px;}

要約すると、padding と margin の違い、padding は境界線の内側にあり、margin は境界線の外側にあります。

ボックス モデル - 幅と高さ

ボックス モデルの幅と高さは、通常オブジェクトの幅と高さとして理解されているものとは異なります。CSS で定義された幅 (幅) と高さ (高さ)、パディング内のコンテンツ範囲を指します。

したがって、要素の実際の幅 (ボックスの幅) = 左ボーダー + 左ボーダー + 左パディング + コンテンツの幅 + 右パディング + 右ボーダー + 右ボーダー。

要素の高さについても同様です。

例:

css コード:

div{ margin:10px;}

html コード:

div{ margin:10px 20px;}

要素の実際の長さは、10px+1px+20px+200px+20px+1px+10p です。 x=262ピクセル。要素ボックス モデルは、以下に示すように、Chrome ブラウザーで表示できます。