ボックスモデルの塗りつぶし

要素の内容と境界線の間の距離を設定できます。これは「パディング」と呼ばれます。塗りつぶしは上、右、下、左（時計回り）に分けることもできます。次のコード:

div{padding:20px 10px 15px 30px;}

順序を混同しないでください。上記のコードは個別に記述することができます:

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

上下左右のパディングがすべて 10px の場合は、次のように記述できます

div{padding:10px;}

上下のパディングが同じ 10px で、左右のパディングが同じ 10px の場合パディングは同じ 20px なので、次のように書くことができます:

div{padding:10px 20px;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
    width:100px;
    height:100px;
    padding:10px;
    border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>填充</title> <style type="text/css"> #box1{ width:100px; height:100px; padding:10px; border:1px solid red; } </style> </head> <body> <div id="box1">盒子1</div> </body> </html>

提出するリセットコード

自動運転