外側の余白 margin｜CSS辞典｜HTMLタグ・CSS

Home≫CSS辞典≫外側の余白 margin
サイト内検索

外側の余白 margin

≪ 中身の余白 padding 【 HOME 】 横幅を指定 width ≫
Yahoo!ブックマークに登録Yahoo!ブックマークに登録 Google Bookmarks に追加Google Bookmarks に追加 はてなブックマークに登録はてなブックマークに登録 livedoorに記事をクリップlivedoorに記事をクリップ
外側の余白 （詳細情報）
字体 margin:★;　　余白をまとめて指定。
margin-top:★;　　上だけの余白を指定。
margin-left:★;　　左だけの余白を指定。
margin-right:★;　　右だけの余白を指定。
margin-bottom:★;　　下だけの余白を指定。
指定 ★の部分に下記の「 」内 の効果を指定していきます。
  • 「数字」 ボックス外の余白量を指定することができます。
    　（単位の種類：　%　px　pt　mm　cm　in　pc　em　ex　）
  • 「auto」 オートに指定すると自動的に余白を判断されます。
    センターに表示したいときなどは横の余白を auto にしておくとうまく表示されます。
margin だけで指定すると、上下左右の余白をまとめて指定することができます。
  • ４つ指定すると上、右、下、左と指定することができます。
    例： margin: 5px 10px 4px 8px;
  • ３つ指定すると上、左右、下と３パターン指定することができます。
    例： margin: 10px 20px 5px;
  • ２つ指定すると上下、左右と２パターン指定することができます。
    例： margin: 10px 20px;
  • １つ指定すると上下左右と全部同じ指定をすることができます。
    例： margin: 15px;
効果 ボックスの外側の余白の量を指定することができます。
注意 ブラウザによっては、上だけ余白の指定が反映されない場合があります。対処するには、
その上にある対象物の下マージンを指定するか、padding で上余白を指定しましょう。
例１ <div style="background-color: #faa; margin: 35px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例２ <div style="background-color: #afa; margin-left: 55px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例３ <div style="background-color: #aaf; margin: 45px 10px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例４ <div style="background-color: #faf; margin: 5px 160px 50px 25px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です


≪ 中身の余白 padding 【 HOME 】 横幅を指定 width ≫
練習用書き込みフォーム（サンプル表示）


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料ＨＰ素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材ＮＡＶＩ 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材Ｒ Webランキング
web サイトの説明 素材使用方法 質問集/用語集 作成練習場 HTML/CSS カラー見本