CSSボックスモデルの紹介

1. マージンとパディングの違い:

Web ページを壁として想像すると、図に示すように、Web ページ内のコンテンツは常にボックスで構成されていると要約できます。箱を取り出すと、余白、枠線、内側の余白、中身の4つの部分で構成されていることがわかります

内側の赤い線が余白、内側の灰色のマークが枠線（ボーダー）です、青い線はパディングを示し、次に具体的な内容（コンテンツ）は写真と非常に似ていますか？このとき、ボックスモデル内のボックスは、フォトフレーム、写真、フォトフレームと外壁との距離、写真と写真間の距離で構成されるブロック（div）であると考えることもできます。フレームと写真。

2. 例:

1,

div

{

margin:3px 5px 6px;

padding:4px 6px;

border-width:6px;
border-color:black;

width :500;

height :300;
}

この CSS 定義はそのようなボックスを説明します:

そのマージンと上部の間の距離は 3 ピクセル、マージンと左右の部分の間の距離は 5 ピクセル、マージン間の距離は

その境界線の幅は 6 ピクセル、境界線の色は黒です

そのパディングは上下の境界線から 4 ピクセル離れています。 ;

写真のサイズは 500*300 です

2。マージンを例に挙げたボックスのデフォルト値の説明:

margin:4px;

は、ボックスと上部の間の距離を意味します。右、下、左のマージンは 4 ピクセルです。

margin:4px 6px;

は、ボックスと上マージンと下マージンの間の距離が 4 ピクセル、右マージンと左マージンの間の距離が 6 ピクセルであることを意味します。 margin:4px 5px 6px;

は、ボックスと上のマージンの間の距離が 4 ピクセル、右と左のマージンからの距離が 5 ピクセル、下のマージンからの距離が 6 ピクセルであることを意味します。 4px 5px 6px 7px;

は、ボックスと上マージンの間の距離が 4 ピクセル、右マージンからの距離が 5 ピクセル、下マージンからの距離が 6 ピクセルであることを意味します。 7ピクセル

以上がCSSボックスモデルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。