2018年09月25日(火)

【CSS】余白を指定！paddingとmarginの使い方と役割

• 0
• 46
• 11
• 32

使いやすく、挙動もすぐわかるため「なんとなく」分かったつもりになるのが「paddingプロパティ」や「marginプロパティ」です。しかし、厳密に幅の設計を行うと、途端に迷いが生じませんか？

「『余白』の計算と言われると、あまり考えてサイトを設計していないな」
「widthの幅は、どこから、どこまでの距離なの、paddingやmarginも含まれているの?」

こんな印象を持っている人も中にはいるはずです。「padding」と「margin」は数あるCSSプロパティの中で、最も使用頻度の高く、それはサイトの設計(特に幅の設定)に大きく影響します。これがしっかり理解できれば、サイトを美しく見せることができます。ここでは、必ず知っておいて欲しい「padding」と「margin」で設定できる「余白」の考え方を中心に説明します。この記事は、初心者向けの記事であり、経験者が読むには物足りなさを感じるかもしれません。

padding/marginの役割

要素について理解しよう!

「padding]と「margin」について説明する前に、何度も出てくる「要素」という言葉を知っておきましょう。要素とは、開始タグから、終了タグまでの塊を指す言葉です。htmlでは...