Homepage Zero ガイド
logo

ゼロから始めよう！わかりやすい！ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホーム＞HTMLリファレンス（アルファベット検索）＞marginプロパティ

CSSプロパティ辞典
タグ一覧（ABC順） 目的別タグ一覧 スタイルシート一覧（ABC順） 目的別スタイルシート一覧

margin プロパティ …要素の上下左右のマージンをまとめて指定する

使用プロパティ

CSSプロパティ

margin: 値;

対象となる
要素

すべて

継承

しない

値

次項（値と働き）を参照
対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

margin プロパティを使えば、要素の上下左右のマージンをまとめて指定することができます。
値には長さを１つから４つ指定でき、長さを複数指定する場合は半角スペースで区切ります。なお、マイナス値を指定することができ、隣接する領域を重ねて表示させたり、領域を縮小させることもできます。
上下左右のマージンを個別で指定するには、margin-top プロパティ（上側のマージン）、margin-bottom プロパティ（下側のマージン）、margin-left プロパティ（左側のマージン）、margin-right プロパティ（右側のマージン）を使用します。

マージンとパディングとその違いについては、「マージンとパディングの違いを知っておこう！」を参考にしてください。

値と働き

値 働き 値 働き
マージンの長さの値を１つ指定 上下左右の長さになる。 マージンの長さの値を２つ指定
（半角スペースで区切る）		 １つ目に指定した長さが上下、２つ目に指定した長さが左右の長さになる。
マージンの長さの値を３つ指定
（半角スペースで区切る）		 １つ目に指定した長さが上、２つ目に指定した長さが左右、３つ目に指定した長さが下の長さになる。 マージンの長さの値を４つ指定
（半角スペースで区切る）		 １つ目に指定した長さが上、２つ目に指定した長さが右、３つ目に指定した長さが下、４つ目に指定した長さが左の長さになる。

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

<!--スタイルシート-->
<style type="text/css">

p {
border: 1px solid #AAAAAA;
margin: 50px;
}

</style>
</head>

<!--ページの本文-->
<body>

<p>上下左右のマージンをまとめて「50px」に指定しています。</p>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド

上下左右のマージンをまとめて「50px」に指定しています。

関連情報ページ

△ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

↑さらに更新予定です。
logo
ゼロから始めよう！わかりやすい！ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|
copyright (C) TOMIY All Right Reserved