スタイルシートリファレンス > margin

スタイルシートリファレンス margin


margin マージン上下左右を指定する

マージン(外側の余白)上下左右をまとめて指定します。


margin:1em;
上下左右1em
margin:1em 2em;
上下1em 左右2em
margin:1em 2em 3em;
上1em 左右2em 下3em
margin:1em 2em 3em 4em;
上1em 右2em 下3em 左4em


数値指定
px,em
割合指定
%
自動
auto

px
画像を構成する最小単位 (モニタの解像度により変化)
em
文字の高さを1とした単位 (フォントサイズにより変化)

▲ページ先頭へ

使用例 margin

ボックスの中にマージンを指定してテキストを配置します。

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
.box {
width:450px;
background-color:#cccccc;
}
.smp1 {
background-color: #aaaaaa;
margin: 10px;
}
.smp2 {
background-color: #aaaaaa;
margin: 10px 20px;
}
.smp3 {
background-color: #aaaaaa;
margin: 10px 20px 30px;
}
.smp4 {
background-color: #aaaaaa;
margin: 10px 20px 30px 40px;
}
-->
</style>
</head>
<body>
<div class="box">
<p class="smp1">マージン 上下左右10px</p>
</div>
<br>
<div class="box">
<p class="smp2">マージン上下10px 左右20px</p>
</div>
<br>
<div class="box">
<p class="smp3">マージン上10px 左右20px 下30px;</p>
</div>
<br>
<div class="box">
<p class="smp4">マージン上10px 右20px 下30px 左40px</p>
</div>
<br>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


マージン 上下左右10px


マージン上下10px 左右20px


マージン上10px 左右20px 下30px;


マージン上10px 右20px 下30px 左40px


▲ページ先頭へ

関連項目【マージン】

margin
マージン上下左右を指定する
margin-top
マージン上を指定する
margin-bottom
マージン下を指定する
margin-right
マージン右を指定する
margin-left
マージン左を指定する

▲ページ先頭へ

スタイルシートリファレンス > margin