menu
menu

キーワード検索

 

7月更新・前月(6月)の人気記事トップ10 - 7/1/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  3. ( 3 - ) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. (圏外↑) 【Mac】Safariでソースコードを見る方法
  5. ( 9 ↑) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  6. (圏外↑) 【jQuery】jQueryでドロップダウンメニュー
  7. ( 4 ↓) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  8. ( 3 ↓) 【CSS】CSSだけでドロップダウンメニュー
  9. ( 5 ↓) 【Mac】Finderにフォルダのフルパスを表示させる方法
  10. ( 6 ↓) 【制作Tips】画面解像度一覧表
このエントリーをはてなブックマークに追加

margin【CSSリファレンス】

margin

こんにちは(・∀・)

CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはmarginです。

概要

marginプロパティを使用して要素と隣接する他の要素のマージン(間隔)を指定します。四辺まとめて指定する方法と個別に指定する方法があります。


.sample {
  margin: 10px;
}
適用要素

すべての要素
tr要素・th要素・td要素・thead要素・tbody要素・tfoot要素・col要素・colgroup要素を除く

指定できる値
実数値+単位
マージンを実数値+単位で設定
%値
マージンを親要素の幅に対する割合で設定
auto
自動設定
初期値

auto

指定方法
margin:10px;
上下左右
margin:10px 20px;
上下 左右
margin:10px 20px 10px;
上 左右 下
margin:10px 20px 10px 20px;
上 右 下 左

0の場合単位はなくても可。autoの指定もできます。

個別に指定
margin-top:
margin-right:
margin-bottom:
margin-left:
1. サンプル

要素にmarginを指定します。

HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.
</p>
CSS

.demo {
  margin: 10px;
}
Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus.

margin:10pxの指定がしてあるのでどちらの要素も外側に10pxのmarginがあります。


2. サンプル

罫線にmarginを指定します。

指定方法

ブラウザによってはmarginが効かないためtext-alignを使う場合もあります。

margin-left: 0;
左に表示 Firefox Safari Crome
margin-right: 0;
右に表示 Firefox Safari Crome
text-align: left;
左に表示 IE Opera
text-align: right;
右に表示 IE Opera
HTML

<p class="demo2"><hr></p>
CSS

hr {
  width: 300px;
  height: 2px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
Result



関連リンク

CSSリファレンス

  • CSS
このエントリーをはてなブックマークに追加