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

 

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

HTML&CSS

【CSS】paddingの解説です。読み方は「パディング」です。
余白を指定する方法を知りたい方はこちらで解決します💡

スポンサードサーチ

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

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

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

引用:Google

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

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

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

上の画像は、本文という文字にborderで枠線をつけたものです。この状態を基準にpaddingがどう作用するか見てみましょう。

paddingを四方全体にかける

☝このように打つことで上下左右全てに200pxの余白を指定できます。

paddingを部分的にかける




☝このように打つことで
☟それぞれ、このように高さを指定できます。本文に対して、どの方向に余白を入れるか?ということですね💡

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


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


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

【特徴】paddingの持つ特徴

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

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

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

paddingに似た効果を持つCSS

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