・余白には「外側」と「内側」があります。今回は「内側の余白」＝paddingだけに注目！
・「文字が端っこにくっついちゃう」「背景色はつけたけど、なんだか窮屈…」などの悩みを解決します！
目次
paddingとはどこのこと？
・ボタンを例にして説明します
・paddingとはボックス内の内側の余白です。ボタンを例にすると、文字とボーダの間の余白がpaddingになります。
・paddingがない（余白無し）場合、とpaddingあり（余白あり）の場合ではこのように違います。
ボタンを作る
・emmetを使って、素早くボタンを作ります。
フォルダ作成の方法はこちらから→【 Live Server が表示できない！！】VS code初心者あるある対処法とフォルダ作成
・emmetを使いましょう！
ボタンが小さいので少し大きくしましょう！
・セレクタについて理解が深まる記事→CSSセレクタってなに？初心者にも超わかりやすく解説
・htmlのみで作成したボタンは余白がないので窮屈に感じます。そこで、paddingを使って余白たっぷりの見た目に良いボタンを作成します
ショートハンドでまとめて指定する方法
上下と左右を個別に指定する方法
それぞれを指定する方法
・時計まわり上右下左の順番で記述します。
まとめ
・paddingは「読みやすさ」「デザインのゆとり」に大きな影響を与えます。
コメント