HTML+CSS 簡単に始められるボックスモデルの充填

要素の内容と境界線の間の距離を設定できます。これは「パディング」と呼ばれます。パディングは上、右、下、左(時計回り)に分けることもできます

以下に例を書いてみましょう:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
       width:200px;
       height:100px;
       border:1px solid red;
       padding:10px 10px 10px 10px;
      }
  </style>
</head>
<body>
    <div>php中文网</div>
</body>
</html>

実はこのように書くこともできます

div{
    padding-top:10px;
    padding-right:10px;
    padding-buttom:10px;
    padding-left:10px;
}

同じであれば、このように書きます

padding:10px;

順番は右上下左です

上下の値が同じで左右の値も同じであれば書けますこのように

パディング: 10px 20px;

次のセクション

新しいファイル

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 div{
 width:200px;
 height:100px;
 border:1px solid red;
 padding:10px 10px 10px 10px;
 }
 </style>
</head>
<body>
 <div>php中文网</div>
</body>
</html>

提出するリセットコード

自動運転

全画面表示