ボックスモデル -- ボーダー
要素と他の要素の間の距離はマージンを使用して設定できます。境界は、上、右、下、左に分割することもできます。次のコード:
div{margin:20px 10px 15px 30px;}は個別に記述することもできます:
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}上下左右の境界線が両方とも 10px の場合は、次のように記述できます:
div{ margin:10px;}上下の境界線が同じ場合10px、左右の境界線が同じ 20px の場合は、次のように書くことができます:
div{ margin:10px 20px;}要約すると、パディングとマージンの違いは、パディングは境界線の内側にあり、マージンは境界線の外側にあります。
りー
新しいファイル
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red;
}
#box1{margin-bottom:30px;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
