Web学習 【20】 margin padding 指定方法

更新
2015年01月06日(火)

本文を追記欄に移動

margin padding 指定方法

 margin padding の指定方法は何通りかありますが、整理してみました。

個別に指定する方法

 例えばマージンを「上10px・下20px・左30px・右40px」にする場合、プロパティで個別に指定する方法だと下記のように指定します。

margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 40px;

上10px・下20px・左30px・右40px

 上記のソースコードは下記になります。

<div style="border: solid 1px #000000; background-color: #cccccc;">
<div style="border: solid 1px #333333; background-color: #ffffff; margin-top: 10px; margin-bottom: 20px; margin-left: 30px; margin-right: 40px;">
<p>上10px・下20px・左30px・右40px</p>
</div>
</div>

一度に指定する場合

 一つのプロパティで一度に指定する場合はその順序が決まっています。時計回りで上・右・下・左の順となります。例えば同じようにマージンを「上10px・下20px・左30px・右40px」にする場合、下記のように指定します。

margin: 10px 40px 20px 30px;

上10px・下20px・左30px・右40px

 上記のソースコードは下記になります。

<div style="border: solid 1px #000000; background-color: #cccccc;">
<div style="border: solid 1px #333333; background-color: #ffffff; margin: 10px 40px 20px 30px;">
<p>上10px・下20px・左30px・右40px</p>
</div>
</div>

省略方法

 注意すべきは margin padding プロパティで、省略して一つ・二つ・三つだけ指定する方法があるので、どの方向を指定しているのか間違えないようにしなくてはなりません。

 私の覚え方は「時計回りで上・右・下・左の順で、書いていないのは反対側から補う」と覚えてます。

記述例指定の方向(原則)省略分の解釈
margin: 10px 20px 30px 40px;上・右・下・左
margin: 10px;右・下・左はそれで補う
margin: 10px 20px;上・右下は上から、左は右から補う
margin: 10px 20px 30px;上・右・下左は右から補う

 つまり下記となります。

記述例指定の方向・値
margin: 10px 20px 30px 40px;上10px・右20px・下30px・左40px
margin: 10px;上下左右10px
margin: 10px 20px;上下10px・左右20px
margin: 10px 20px 30px;上10px・左右20px・下30px

 上下を違う数値で指定する場合は三つの指定でも可能ですが、左右を違う数値で指定するには四つとも指定するか、 margin-right margin-left で指定するしかありません。

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

EMAIL:
URL:
TITLE:
簡潔に書かれていてわかりやすいです。
わたしのように使うたびに調べていた人たちも、これを読めばバッチリですね。
自分の勉強だけでも大変なのに、その知識を共有しようと労力を惜しまないデカイーさんを尊敬します!
宵乃 さんへ
EMAIL:
URL:
自分も最初はこの表記に悩まされたので、特に独学している人にとっては悩みの種になっているんじゃないかと思います。
自分のような未熟な学習状態の者が教鞭を垂れるのはお恥ずかしいことなのですが、教えることで知識がより正確なものになるので、自分の学力向上のために記事を書いている面もあります。
こんな記事書いておきながら試験に不合格だったらお笑いですからねw

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。