CSSマージンの使い方の詳しい説明_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSマージンの使い方の詳しい説明_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:31:43

オリジナル

1290 人が閲覧しました

CSS マージンの使用方法の詳細な説明:
推奨事項: 可能な限りコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。
margin 属性は Web ページで非常に頻繁に使用されるため、この属性の使用法を詳しく紹介します。
この属性は、オブジェクトの外側のマージンを定義するために使用されます。いわゆる外側のマージンは、境界線の外側を囲む空白の領域です。上下左右の特定の方向の余白を個別に定義できます。コード例は次のとおりです。
例 1:
子 div には外側マージンがありません:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{  width:400px;  height:400px;  border:1px solid red;}.children{  width:100px;  height:100px;  border:1px solid green;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>

ログイン後にコピー

例 2:
左マージンを設定した後、子 div:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{  width:400px;  height:400px;  border:1px solid red;}.children{  width:100px;  height:100px;  border:1px solid green;  margin-left:20px;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>

ログイン後にコピー

上記のコードは左マージンを設定します子 div の外側のマージンこれにより、マージンの意味がより明確になります。
もちろん、margin-right、margin-top、margin-bottom を通じて各方向のマージンを設定できます。それぞれの方向の外側の属性を使用してマージンを設定することは明らかですが、少し冗長でもあるため、マージン属性を使用して複数の方向のマージンを一度に設定できます。コード例は次のとおりです。

rrree

上記のコードでは、オブジェクトの 4 つの外側のマージンが、margin 属性を使用して一度に設定されます。
マージン属性値の特徴は以下のとおりです:
4つのパラメータ値をすべて指定すると、上、右、下、左の順に4辺に適用されます。
1枚のみの場合は4面使用となります。
2つある場合、1つ目は上下用、2つ目は左右用となります。
3つある場合、1つ目は上用、2つ目は左右用、3つ目は下用となります。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=4657

詳細については、以下を参照してください: http://www.softwhy.com/divcss/