CSSボックスモデルの概要
まず、マージン (外側(cè)のマージン)、パディング (內(nèi)側(cè)のマージン)、コンテンツ (コンテンツ) などのボックスのコンポーネントを見てみましょう。コンテンツを直接囲む內(nèi)側(cè)の部分はマージンです。パディングは要素の背景を表します。パディングの端が境界線です。境界線の外側(cè)にはマージンがあり、デフォルトでは透明であるため、その背後にある要素が隠れることはありません。
図を使用してその構(gòu)造を説明しましょう:
パディング、境界線、マージンはすべてオプションであり、デフォルト値はゼロです。ただし、多くの要素はユーザーが生成し、すべての要素は初期化と同等のユニバーサル セレクターを使用して設(shè)定できます。
* {
margin: 0;
padding: 0;
}上の図からわかるように、幅 (幅) と高さ (高さ) は次のものを參照します。コンテンツ領(lǐng)域の幅と高さ。パディング、境界線、余白を増やしてもコンテンツ領(lǐng)域のサイズには影響しませんが、要素のボックス全體のサイズは大きくなります。
これらの屬性は次のように設(shè)定できます:
box {
width: 70px;
margin: 10px;
padding: 5px;
}マージンは負(fù)の値にすることができ、多くの場合、負(fù)の値のマージンを使用する必要があります。
