指定要素の外側の余白(margin)

個別で指定する

.samples{
 margin-top:値;  /* 上側の指定 */
 margin-left:値;  /* 左側の指定 */
 margin-right:値; /* 右側の指定 */
 margin-bottom:値; /* 下側の指定 */
}

省略形

 margin:値;   /* 全部 */
 margin:値 値;  /* 上下 左右 */
 margin:値 値 値;  /* 上 左右 下 */
 margin:値 値 値 値; /* 上 右 下 左 */

応用：中央表示

.sample{
 width:値;
 margin:0 auto; /* 上下 左右 */
}

左右の余白は自動的に決まるので中央に配置できる。必ずwidthで幅の設定を行う。

応用：右寄せ

.sample{
 width:値;
 margin-left:auto; /* 上 左 下 右 */
}

左余白は自動的に決まるので右寄せとして配置できる。必ずwidthで幅の設定を行う。

---

覚書

marginは相殺される。

<p style="margin:20px;" id="a">ああああ</p>
<p style="margin:30px;" id="b">ああああ</p>

とあったとき、bottomとtopで"a"と"b"の間は50pxと考えそうだが、実際のところ30pxとなる。
このとき、数値の高い方で表示する。
例外もあるらしい。

 

関連記事