chaso要素に余白を作るCSS、paddingとmarginの違いと使い方を徹底解説ツイートシェアはてブGoogle+Pocketハム氏なっちゃそ〜。要素に余白をつけたいときにmatginとpaddingどっちを使ったらいいか分かんないよ〜。なっちゃそmarginとpaddingの違いはCSSの中でも特に混乱するプロパティだからね。今回は2つの違いと書き方について解説していくよ。Contentspaddingとmarginの基礎知識を知ろうpaddingとはmarginとはpaddingとmarginの書き方を知ろうpaddingプロパティの書き方marginプロパティの書き方marginの相殺って何?まとめpaddingとmarginの基礎知識を知ろうpaddingとmarginはどちらもWeb上の要素に余白を作りたいときに指定するCSSプロパティですがその特徴にはいくつが違いがあります。それぞれ適切な用途で使用しないと思い通り表現が出来ないので、ここで2つの違いをしっかりと押さえておきましょう。paddingとは「paddingは要素の内側の余白のことである」という説明を多く見かけますがそれだとなんのことやらよくわからないですよね。paddingは要素と要素の間に存在している詰め物です。paddingが詰まっている部分が余白となって表現されています。デフォルトの状態は0なので、「ここは余白なんていらないよー」というときには特に指定する必要はありません。実際の作業でpaddingを指定したくなるのはどんなときかというと要素に背景色をつけたいときや要素をボックスで囲んでボタンにしたいときです。(もちろん他にも色々ありますが今回はpaddingの特徴を捉えやすいこの2つで説明したいきます。)要素に背景色をつける例えば、下の図のように見出しに背景色を設けたいとき、そのまま背景色の指定だけをしてしまうと点線の範囲しか色がつきません。なく「少し広い範囲で色をつけたいんだ!」って時はpaddingをつけるとpaddingの指定範囲に背景色をつけることができます。HTML/CSSの指定はそれぞれこんな感じボタンを作るボタンはテキストの外側にborder(ライン)を引くことで作成することが多いですが、borderも何も指定しないで作成すると下の図の点線部分にひかれてしまいます。ボタンにはデザイン性を持たせたいのでpaddingをつけてテキストとborderの間をあけるようにします。HTML/CSSの指定はそれぞれこんな感じいかがでしょう。paddingへの理解が深まったでしょうか?ちなみに、この後紹介するmarginは要素の外側に余白を作るためのCSSプロパティなのでここで紹介した「背景色を作る」「ボタンを作る」といった用途の時には使うことができません。paddingはwidth/heightに含まれないここで1つ注意して欲しいのが要素にwidthとheightを指定した場合、paddingはその中に含まれないということです。/height+paddingとなるのでこれを忘れてpaddingを設定してしますと意図しない結果になることがあります。marginとはmarginは要素の外側に設けられる余白を指定するためのCSSプロパティです。これは普段目にする余白の概念に近いので理解しやすいかもしれませんね。marginが使用されるのはそのままですが、要素と要素の間に余白を作りたい時です。1つ例をあげてみましょう。下の図のようにボタンが3つ並んでいるとしたら、ボタンに指定されているborderよりも外側に設けられる余白がmarginになります。paddingの例で紹介した背景色をつける場合もmarginは背景色の外側につく余白になります。marginの設定で要素をセンター配置にできるボタンやテキストなど、あらゆる場面で要素をセンターに持ってきたいといった事態が起こります。auto;と設定すると要素がエリアのセンターにきてくれます。paddingとmarginの書き方を知ろうなっちゃそpaddingとmarginの違いについては理解できましたか?ここからは実際にmarginプロパティ、paddingプロパティを指定するときの書き方について解説していきます。paddingプロパティの書き方CSSでpaddingプロパティを使用する場合はこんな感じに記述します上記の指定方法だと上下左右全てに100pxのpaddingがつきますが、paddingは上だけに余白をつける、下だけに余白をつけるといった個別での指定も可能です。その場合の書き方はこんな感じさらに「余白は全体に欲しいけど、全部違う値がいいんだよな〜」というにはこんな感じで指定すれば一回でバラバラの値を指定することができます。左の余白;}となっていて値の間は半角スペースで区切っています。「上と下が同じ値&左右が同じ値で指定したい」もしくは「上と下は違う値だけど左右は同じ値で指定したい」といった時はこんな感じになります。指定することができます。マイナスの値やautoは指定することができないので少しだけ注意が必要です。marginプロパティの書き方CSSでmarginプロパティを使用する場合はこんな感じに記述しますこの指定方法だとpadding同様、要素の周り全体に余白ができます。上下左右どれかにだけmarginを指定したい場合はpaddingと同じ形式で指定することができます。全体にバラバラの値を指定したい場合と上下&左右を同じ値にしたい場合、上下がバラバラで左右は同じ値を指定したい場合もpaddingと同じ形式で指定することができます。指定することができます。paddingとは違ってマイナスの値、autoを指定することができます。マイナスの値はネガティブマージンといい、指定した箇所の余白を狭めることができます。marginの相殺って何?marginには、2つの要素それぞれにmarginが指定されていてそれらが隣り合っていた場合、2つの要素のmarginの値は片方が無効になり大きいの値が適用されるという特徴があります。これをmarginの相殺と言います。これはmargin同士でのみ起こる現象で、padding同士やmarginとpaddingでは総裁は起こりません。marginの相殺を考慮しないと意図したようなデザインにならないことがあるので覚えておくようにしましょう。まとめいかがでしたか?paddingとmarginの使い方はCSSを勉強する中で引っかかりやすい分野かと思いますが、実際にオブジェクトを作りながら余白を設けて見ると内側の余白と外側の余白の概念を理解できるかと思います。非常によく使うプロパティなのでぜひ早めにマスターして余白を使いこなしてくださいね。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取る大人になってからの勉強が尊すぎて気がついたらガリ勉になってたわたしが我慢をしないと言い続けている理由RECOMMENDこちらの記事も人気です。Webデザイン2018.4.19CSSだけでアニメーションやエフェクトがつけられるCSS3の便利な機能を...Webデザイン2018.4.8CSSは怖くない!CSSの役割と使い方Webデザイン2018.4.7HTMLの役割って何?どうやって使うの?HTMLの基礎を徹底的に解説しますWebデザイン2018.4.9レスポンシブ対応が楽になる!BootstrapについてまとめてみたWebデザイン2018.1.9Webデザイナーって何?どんなことしてるの?Webデザイナーの仕事を徹底...Webデザイン2018.4.8HTML5って何?どんな機能があるの?HTMLの特徴をまとめてみたなっちゃそのプロフィールWebデザイナー&グラフィックデザイナー新卒で入社した会社を半年で辞め、完全未経験から独学でフリーランスのデザイナーになった23歳。『視野を広げて正しい努力をすれば人生に我慢は必要ない』ことを証明したい。『死ぬこと以外かすり傷』のまとめをまとめてみたマレーシアに移住するメリットとデメリットを正直にまとめてみたノリと勢いでマレーシア移住を始めてしまいました自分の仕事や職場環境は今の自分の価値の鏡だぞ。