目次
CSSのmarginとは？paddingとは？
CSSのmargin(マージン)とpadding(パディング)はコンテンツの周りのスペースを調整する役割を担います。CSSのpaddingはコンテンツの直ぐ周りの余白を主に調整します。marginはpaddingとborderの外側のスペースを主に調整します。
paddingとは？
css paddingを使うことによって、コンテンツと枠線(border)の間の余白の調整を行うことができます。paddingの上下左右の余白を細かく設定することによって、コンテンツの上余白を10px、下余白を5px、右20px、左を7pxといったように上下左右の余白をそれぞれ別々の間隔に調整することができます。
-
-
CSS borderの使い方を理解してデザインの幅を広げよう！
続きを見る
marginとは？
css marginを使うことによって、コンテンツの枠線(border)の外側の余白の調整を行うことができます。marginを上下左右の余白を細かく設定することによって、コンテンツの上下を15px、右左を10pxといったように上下、左右の余白をそれぞれ別々の間隔に調整することができます。
コンテンツが写真の場合
犬の写真を例に取ってコンテンツ周りの要素を分解してみると次のようになる。
写真の周りの余白はpadding要素、その次に枠線border、その外側にはmarginとなっている。
コンテンツが文字の場合
コンテンツが見出しのような文字コンテンツの場合は、次のように見出し要素を分解することができる。写真上部は見出しの外観で、写真下部が見出しの要素を分解した図解となっています。
”owlviewのサイトです。”という文字の直ぐ周りの余白はpaddingとなっています。その次に枠線border要素が入ります。その外側のスペースの調整をmarginで調整を行います。
marginとpaddingの違い
marginとpaddingの違いは先程説明したように、marginはコンテンツと枠線（border）の間の余白の部分の調整を行い、paddingは枠線(border)の外側の部分の余白の調整を行います。
-
-
CSS floatとは？～要素を横並びにする方法～
続きを見る
padding・margin基本の書き方
paddin・marginはCSSでどのように指定すれば良いのでしょうか。paddingとmarginの基本的な書き方から上下左右の余白の間隔が別々に設定する書き方まで見ていきたいと思います。
paddingの基本的な書き方
css paddingは二つの方法で指定する事が可能です。一つ目はmargin: 数値px;による指定です。1~4つの数値を指定すれば上下左右の余白をそれぞれ異なる間隔で設定することも可能です。
paddingの書き方の基本
- padding値を1つ指定 padding; 10px；
枠線とコンテンツの余白の上下左右の間隔が10pxに指定される。
- padding値を2つ指定 padding; 10px 20px；
枠線とコンテンツの余白の上下間隔が10pxに指定、左右間隔が20pxに指定される。
- padding値を3つ指定 padding; 10px 20px 30px；
枠線とコンテンツの余白の上間隔が10pxに指定、右左間隔が20pxに指定、下間隔が30pxに指定される。
- padding値を4つ指定 padding; 10px 20px 30px 40px;
枠線とコンテンツの余白の上間隔が10pxに指定、右間隔が20pxに指定、下間隔が30pxに指定、下間隔が40pxに指定される。
これらは基本的なmarginの指定方法になります。二つ目は上下左右それぞれ別々にpaddingで指定する方法です。
paddingの上下左右を個別に指定
padding-top: 数値px;
上の余白の間隔を数値に指定
padding-right:数値px;
右の余白の間隔を数値に指定
padding-bottom:数値px;
下の余白の間隔を数値に指定
padding-left:数値px;
左の余白の間隔を数値に指定
表示例
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>コンテンツ</h1> </body> |
CSSコード
|
1 2 3 4 |
h1{ border-style: solid; padding: 30px; ) |
marginの基本的な書き方
css marginは、margin: 数値px;で指定することができます。1~4つの数値を指定すれば上下左右の余白をそれぞれ異なる間隔で設定することも可能です。
marginの書き方の基本
- margin値を1つ指定 margin: 10px；
コンテンツの枠線の外側の上下左右の余白が10pxに指定される。
- margin値を2つ指定 margin: 10px 20px；
コンテンツの枠線の外側の上下の余白が10px、左右の余白が20pxに指定される。
- margin値を3つ指定 margin: 10px 20px 30px；
コンテンツの枠線の外側の上の余白が10px、左右の余白が20px、下の余白が30pxに指定される。
- margin値を4つ指定 margin: 10px 20px 30px 40px;
コンテンツの枠線の外側の上の余白が10px、右の余白が20px、下の余白が30px、左の余白が40pxに指定される。
marginの上下左右を個別に指定
margin-top: 数値px;
上の余白の間隔を数値に指定
margin-right:数値px;
右の余白の間隔を数値に指定
margin-bottom:数値px;
下の余白の間隔を数値に指定
margin-left:数値px;
左の余白の間隔を数値に指定
表示例
コンテンツの枠線の外側の余白の上下左右を均等に間隔30pxで間隔を開けています。
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>コンテンツ</h1> <body> |
CSSコード
|
1 2 3 4 |
h1{ border-style: solid; margin: 30px; } |
上下左右に同じ分だけ余白を設定する
padding・marginの基本的な書き方のところでは1つの値で上下左右に同じ分だけ余白を設定する方法をご紹介しました。ここでは4つの値で上下左右に同じ分だけ余白を設定していきましょう。
表示例
コンテンツと枠線の間に30pxの余白、コンテンツの外側に30pxで余白をあけています。
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>コンテンツ</h1> </body> |
CSSコード
|
1 2 3 4 5 |
h1{ border-style:solid; padding:30px 30px 30px 30px; margin:30px 30px 30px 30px; } |
h1の見出し”コンテンツ”をHTMLに記述します。CSSコードには、h1に対してborder-styleで実線”solid”を指定います。コンテンツと枠線の間に上下左右で30pxの余白を設ける為に、paddingで上下左右の値に対して四つの値で30pxで指定しています。コンテンツ枠線の外周りの余白を設ける為に、marginで30pxで指定しています。
上下に同じ余白、左右に同じ余白を設定する
上下の余白を等しい間隔にし、左右に同じ余白を設定するにはpaddingもしくはmarginを二つの値で指定します。
表示例
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>コンテンツ</h1> </body> |
CSSコード
|
1 2 3 4 5 |
h1{ border-style: solid; padding: 10px 40px; margin: 40px 30px; } |
左右に同じ余白を設定し、上下の余白がそれぞれ異なる場合
上下の余白を等しい間隔にし、左右に同じ余白を設定するにはpaddingもしくはmarginを三つの値で指定します。
表示例
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>コンテンツ</h1> </body> |
CSSのコード
|
1 2 3 4 5 |
h1{ border-style: solid; padding: 10px 40px 20px; margin: 40px 30px 20px; } |
上下左右すべての余白が異なる場合
上下左右全ての余白が異なる場合は、padding・marginを四つの値で指定します。
表示例
上記例のソースコード
HTMLコード
|
1 2 3 |
<body> <h1>コンテンツ</h1> <body> |
CSSコード
|
1 2 3 4 5 |
h1{ border-style: solid; padding: 10px 20px 30px 40px; margin: 10px 20px 30px 40px; } |
marginの相殺
コンテンツ1とコンテンツ２が上下で並んだ場合、marginの値は足し合わされるのではなく、marginが統合され大きい値のみ適用されます。
コンテンツ1,2が上下で隣合わせとなった場合
- コンテンツ１のmargin-bottomは15px
- コンテンツ２のmargin-topは10px
コンテンツ1のmargin-bottomの15pxが適用されます。コンテンツ2のmargin-topの10pxは打ち消されます。二つのコンテンツの間隔は15pxnになります。
結果コンテンツ1とコンテンツ２の間隔は１５pxになります。
コンテンツ同士が上下で隣り合った場合、両コンテンツのmarginにおいて、大きいmarginの値が適用されます。小さいmarginの値は打ち消されます。
margin collapsingと呼ばれる独特のルール
margin collapsingとは二つのコンテンツのmargin-topとmargin-bottomが重なり合った場合、marginが統合され小さいmarginの値は打ち消され、大きいmarginの値のみが適用されるというルールです。
marginの相殺はいつ起こるのか
marginの相殺
- コンテンツが上下で隣合わせになった時
- コンテンツが上下隣り合わせで親要素の中の子要素にmarginを適用した時
marginの相殺は二つのケースで良く起こります。一つ目は、コンテンツが上下で隣合わせになった時です。二つのコンテンツのうちmarginの値が大きい方が適用され、もう一つの小さい値が相殺されます。
二つ目はコンテンツが上下で隣合わせで片方のコンテンツ内に含まれている先頭子要素にmarginを適用し親要素のmarginの値よりも子要素のmarginの値が大きかった場合にmarginの相殺が起こります。
子要素によるmarginの相殺
親要素内に含まれている先頭子要素で親要素内でMarginを３０px設けたいのに関わらず、親要素内部ではなく親要素の外部に突き抜けてmarginが適用されてしまうケースです。先頭子要素のmarginは親要素のmarginを相殺してしまうケースがあるようです。
paddingでは相殺は起こらない？
paddingでは相殺は起こりません。paddingはコンテンツの枠線内の空白内なのでコンテンツの内部として見なされます。二つのコンテンツが並びあってpaddingが相殺される事はありません。
marginはコンテンツの外部の余白として見なされるので、二つのコンテンツが並んだ場合にmarginoの相殺が起こります。
-
-
CSS floatとは？～要素を横並びにする方法～
続きを見る