外側余白（マージン）関連プロパティの値（CSS）

外側余白（マージン）関連プロパティの値（CSS）

margin-top(right・bottom・left)

値（パラメータ）	内容
auto	自動（初期値）
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位
任意の数値+%	親ボックスの幅に対する割合

入力例	margin-top: 10px;

ブロックボックスが上下に隣接する場合、隣接した部分のマージンが相殺される場合があります
上に配置されたブロックボックスのマージンボトムが50pxで、下に隣接して配置されたブロックボックスのマージントップが30pxの場合、相殺されて上下の間は50pxになる場合がある。

サンプルコード（CSS別記）

/*CSSコード*/
.margin {
  background-color: #fdf2f4;
	width: 600px;
  height: auto;
}
.margin-1 {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px; 
  background-color: #d6e3ff;
}

<!--HTMLコード-->
<div class="margin">横600px × 縦auto
  <div class="margin-1">
    マージントップ20px<br>
    マージンライト20px<br>
    マージンボトム20px（相殺されています）<br>
    マージンレフト20pxに設定しています
  </div>
</div>

サンプルコード（CSS別記）の表示

横600px × 縦auto

マージントップ20px
マージンライト20px
マージンボトム20px（相殺されています）
マージンレフト20pxに設定しています

margin

値（パラメータ）	内容
auto	自動（初期値）
任意の数値+px	1px（ピクセル）は画面上の表示の最小単位
任意の数値+%	親ボックスの幅に対する割合

入力例	margin: 10px 20px 30px 40px;
値の設定例	10px;・・・「上右下左」を一括で設定 10px 20px;・・・「上下」と「右左」を設定 10px 20px 30px;・・・「上」と「右左」と「下」を設定 10px 20px 30px;・・・「上」と「右」と「下」と「左」を指定

サンプルコード（CSS別記）

/*CSSコード*/
.margin {
  background-color: #fdf2f4;
	width: 600px;
  height: auto;
}
.margin-2 {
  margin: 50px 10px 20px 50px;
  background-color: #d6e3ff;
}

<!--HTMLコード-->
<div class="margin">横600px × 縦auto
  <div class="margin-2">
    マージントップ50px<br>
    マージンライト10px<br>
    マージンボトム20px（相殺されています）<br>
    マージンレフト50pxに設定しています
  </div>
</div>

サンプルコード（CSS別記）の表示

横600px × 縦auto

マージントップ50px
マージンライト10px
マージンボトム20px（相殺されています）
マージンレフト50pxに設定しています

CSSプロパティ一覧に戻る