HTML+CSS ボックスモデルの境界線で簡単に始められる

要素と他の要素の間の距離はマージンを使用して設定できます。境界線は上、右、下、左に分割することもできます

説明するために例を書いてみましょう;

まず境界線を使用せずにコードを書きます:

<!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中文网</div>
    <div id="dv2">中华民族伟大复兴</div>
</body>
</html>

必要に応じて、2 つの div を一緒にします。 2つのdiv間の距離を30ピクセルにするCSSコードを記述しますか?

#dv2{margin-top:30px;}

このコードを追加すると、2 つの div の間に距離ができます

お友達、右側、下側、左側をそれぞれ試してみてください。どのような効果があるのか見てみましょう

次のセクション

新しいファイル

<!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中文网</div>
 <div id="dv2">中华民族伟大复兴</div>
</body>
</html>

提出するリセットコード

自動運転

全画面表示