ボックスモデルの塗りつぶし
要素の内容と境界線の間の距離を設定できます。これは「パディング」と呼ばれます。塗りつぶしは上、右、下、左（時計回り）に分けることもできます。次のコード:
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>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
