HTML+CSS ボックスモデルの境界線(xiàn)で簡(jiǎn)単に始められる
要素と他の要素の間の距離はマージンを使用して設(shè)定できます。境界線(xiàn)は上、右、下、左に分割することもできます
説明するために例を書(shū)いてみましょう;
まず境界線(xiàn)を使用せずにコードを書(shū)きます:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:200px; height:200px; border:1px solid red; } </style> </head> <body> <div id="dv1">php中文網(wǎng)</div> <div id="dv2">中華民族偉大復(fù)興</div> </body> </html>
必要に応じて、2 つの div を一緒にします。 2つのdiv間の距離を30ピクセルにするCSSコードを記述しますか?
#dv2{margin-top:30px;}
このコードを追加すると、2 つの div の間に距離ができます
お友達(dá)、右側(cè)、下側(cè)、左側(cè)をそれぞれ試してみてください。どのような効果があるのか??見(jiàn)てみましょう