１３．ボーダーのマージンとパディングを指定するスタイルシート
１）ボーダーのマージンを設定する。
マージン属性は、ボーダーの枠と隣接する他のボーダーの枠との間隔を指定する。
隣接するボーダーが存在しない場合は、親要素である＜ｂｏｄｙ＞との間隔が設定される。
また、マージン属性が＜ｂｏｄｙ＞に設定された場合は、ブラウザのウィンドウ枠との間隔が設定される。
①マージンを一括で指定する。
＜書式＞margin:上下左右のマージン 単位は、実数地（px,ptなど）と％、auto（自動設定）がある。
margin:上下のマージン△左右のマージン
margin:上辺のマージン△左右のマージン△下辺のマージン
margin:上辺のマージン△右辺のマージン△下辺のマージン△左辺のマージン
＜例＞<html>
<head>
<title>マージンを一括指定する。</title>
<style type="text/css">
<!--
.allmargin{border:4px dashed olive;
margin:10px 20px 30px 40px;
}
-->
</style>
</head>
<body>
<div
class="allmargin">皆さんここは、自由に作文してみてください。</div>
</body>
</html>
いろいろマージンを変えてみて確認してください。
②マージンを個別に設定する。
＜書式＞margin-top:上辺のマージン
margin-buttom:下辺のマージン
margin-right:右辺のマージン
margin-left:左辺のマージン
＜例＞<html>
<head>
<title>マージンを個別に指定する。</title>
<style
type="text/css">
<!--
.imgmargin{margin-top:30px;
margin-buttom:40px;
margin-left:20px;
}
.txtmargin{margin-left:50px
;
margin-right:50px;
}
-->
</style>
</head>
<body>
<img class="imgmargin" src="????.gif"><!--１００pxＸ１００pxぐらいのイメージを貼り付ける。-->
<div class="txtmargin">皆さんここは、自由に作文してみてください。</div>
</body>
</html>
③二つのマージンをうまく組み合わせた例
<html>
<head>
<title>二つのマージンをうまく組み合わせた例</title>
<style type="text/css">
<!--
.margin1{margin:0px 10px;
background-color:pink;
color:lightblue;
}
.margin2{margin:0px 10px;
border:1px solid pink;
}
-->
</style>
</head>
<body>
<h1 class="margin1">創造（ｔｓｕｋｕｒｕｚｏ．ｃｏｍ）</h1>
<div class="margin2">皆さんここは、自由に作文してみてください。</div>
</body>
</html>
④＜ｂｏｄｙ＞要素にマージンを設定する。
<html>
<head>
<title>＜ｂｏｄｙ＞要素にマージンを設定する</title> <style
type="text/css">
<!--
body{margin:0px;
}
-->
</style>
</head>
<body>
<h1>創造（ｔｓｕｋｕｒｕｚｏ．ｃｏｍ）</h1>
<div>皆さんここは、自由に作文してみてください。</div>
</body>
</html>
２）ボーダーのパディングの設定をする。
ボーダーのパディングは、ボーダーとその内容（エレメント）の間隔を設定する。
①パディングを一括指定する。
＜書式＞padding:上下左右のパディング 単位は、実数地（px,ptなど）と％がある。
padding:上下のパディング△左右のパディング
padding:上辺のパディング△左右のパディング△下辺のパディング
padding:上辺のパディング△右辺のパディング△下辺のパディング△左辺のパディング
＜例＞<html>
<head>
<title>パディングを一括指定する</title>
<style type="text/css">
<!--
.allpadding{padding:30px;
border:solid 6px pink;
background-color:lightyellow;
color:red;
}
-->
</style>
</head>
<body>
<div class="allpadding">皆さんここは、自由に作文してみてください。</div>
</body>
</html>
②パディングを個別に指定する。
＜書式＞padding-top:上辺のパディング
padding-buttom:下辺のパディング
padding-right:右辺のパディング
padding-left:左辺のパディング
＜例＞<html>
<head>
<title>パディングを個別に指定する</title>
<style type="text/css">
<!--
.seppadding{padding-left:50%;
padding-bottom:20px;
padding-top:20px;
padding-right:20px;
border:solid 6px pink;
background-color:lightyellow;
color:red;
}
-->
</style>
</head>
<body>
<div class="seppadding">皆さんここは、自由に作文してみてください。</div>
</body>
</htm>
３）次のように表示させなさい。