~パンピーサラリーマンの為の人生逆転ブログ~

【CSS】marginとは?~余白を入れる方法(枠線の外側)~ | MUKKUN QUEST
MUKKUN QUEST     

 

【CSS】marginとは?~余白を入れる方法(枠線の外側)~

HTML&CSS

【CSS】marginの解説です。読み方は「マージン」です。
余白を指定する方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】margin ~余白を入れる方法~

具体的に解説していきます。

marginとは?【先に概要を知るべき】

引用:Google

全ての要素は、上の画像の通りの作りになっています。
真ん中の青い部分が本文。
本文の周りを線(border)が囲っていて
線の内側(padding)と外側(margin)に余白が用意できるようになっています。

ものすごく簡単に言うと、本文の周りに3重に自在に太さを変えられる膜があるというわけです。

【使い方】marginは実際にこう使う

上の画像は、紺色の背景に「本文」という文字、まわりに黒の枠線を付けたものです。
この状態を基準にmarginがどう作用するか見てみましょう。

marginを四方全体にかける

☝このように打つことで上下左右全てに200pxの余白を指定できます。
☟下の画像の通りです。marginは文字の枠線の外側に余白を作ります💡

marginを部分的にかける




☝marginの文字に方向を指定することで、余白をつける方向を指定できます。本文に対して、どの方向に余白を入れるか?ということですね💡

marginを省略して指定する方法


☝このように打つと、上下200px 左右50px と指定できます。


☝このように打つと、上100px 右80px 下60px 左40px と指定できます。

【応用】要素を中央に配置する方法


☝このように、上下0、左右auto、とmarginを指定することで、要素を中央に配置することができます。
※その際は、必ず要素にwidthで幅を持たせる必要がある。
※上下にautoを使用することはできません。

【特徴】marginの持つ特徴

※随時情報を更新します。

【注意】marginを使う時に起こりやすいミスの事例

※随時情報を更新します。

marginに似た効果を持つCSS

●padding・・・枠線の内側に余白を入れるCSS
●border・・・枠線を指定するCSS