【CSS】paddingとは？～余白を入れる方法（枠線の内側）～
【CSS】paddingの解説です。読み方は「パディング」です。
余白を指定する方法を知りたい方はこちらで解決します💡
もくじ
●paddingとは？【先に概要を知るべき】
●【使い方】paddingは実際にこう使う
●【特徴】paddingの持つ特徴
●【注意】paddingを使う時に起こりやすいミスの事例
●paddingに似た効果を持つCSS
スポンサードサーチ
【CSS】padding ～余白を入れる方法～
具体的に解説していきます。
paddingとは？【先に概要を知るべき】
引用：Google
全ての要素は、上の画像の通りの作りになっています。
真ん中の青い部分が本文。
本文の周りを線（border）が囲っていて
線の内側（padding）と外側（margin）に余白が用意できるようになっています。
ものすごく簡単に言うと、本文の周りに３重に自在に太さを変えられる膜があるというわけです。
【使い方】paddingは実際にこう使う
上の画像は、本文という文字にborderで枠線をつけたものです。この状態を基準にpaddingがどう作用するか見てみましょう。
paddingを四方全体にかける
☝このように打つことで上下左右全てに200pxの余白を指定できます。
paddingを部分的にかける
☝このように打つことで
☟それぞれ、このように高さを指定できます。本文に対して、どの方向に余白を入れるか？ということですね💡
paddingを省略して指定する方法
☝このように打つと、上下200px 左右50px と指定できます。
☝このように打つと、上100px 右80px 下60px 左40px と指定できます。
【特徴】paddingの持つ特徴
※随時情報を更新します。
【注意】paddingを使う時に起こりやすいミスの事例
※随時情報を更新します。