marginとは
【まーじん】
はてなキーワード 無料辞書
[emoji:B2C]ウェブ 
CSSプロパティの一つ。
そのボックスのマージン領域の幅を指定するプロパティ
指定出来る値は
<margin-width>{1,4} | inherit
なお<margin-width>に指定出来る値は
<length> | <percentage> | auto
の3つ。
指定の例
h1 {margin: 1em;} /* 上下左右 */
h2 {margin: 1em 2em;} /* 上下, 左右 */
h3 {margin: 1em 2em 3em;} /* 上, 左右, 下 */
h4 {margin: 1em 2em 3em 4em;} /* 上, 右, 下, 左 */
h5 {margin: 1em auto;} /* 上下方向に1em, 左右方向は中央寄せ */
注意
垂直方向のみに起きる、マージンの相殺に注意。
<h1>h1</h1>
<h2>h2</h2>
というh1とh2が隣接しているhtmlを考える。
CSS
h1 {
display: block;
margin: 1em 2em 5em;
padding: 0em;
border: 1px solid gray;
float: none;
position: static;
}
h2 {
display: block;
margin: 2em 2em 5em;
padding: 0em;
border: 1px solid gray;
float: none;
position: static;
}
と指定する。
この場合、h1とh2の枠線同士の距離は5em+2em=8emでは無く、max(5em,2em)=5emになる。
なお、
h1 { margin: 1em 2em 5em;}
h2 { margin: -2em 2em 5em;}
の場合は、5em-2emで3emになる。
また、
h1 { margin: 1em 2em -3em;}
h2 { margin: -2em 2em 5em;}
の場合は、min(-3em,-2em)=-3emになる。
■関連キーワード
border / CSS / HTML5 / マックス
[emoji:02A]最終更新日05/9/14
[emoji:510]「margin」関連商品
ライフ ノート MARGIN A5 黄 N710 ライフ レポート用紙 マージン A4 方眼 R750 MARGIN CALL The Margin
[emoji:B85]「margin」をもっと検索
[emoji:4CE]「margin」のニュース
[emoji:539]「margin」を含むブログ
[emoji:527]株・韓流投資法
[emoji:330]kabuzyouhou[emoji:02A]18/10/16
[emoji:527]絶景@日本
[emoji:330]zekkei-japan[emoji:02A]18/10/16
[emoji:814]「margin」そのほか

[emoji:836]画面上へ戻る