ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSマージンの使い方の詳しい説明_html/css_WEB-ITnose
CSSマージンの使い方の詳しい説明_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:431291ブラウズ
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/