marginとpaddingの違いについて、私も最初はつまづいたので絵にして説明してみました。初心者向きにまずはこんな感じに覚えればOKって感じのざっくりとした説明です。
そもそもどんな意味？
直訳すると
padding→詰め物
margin→余白
で
合わせて覚えたいのが
border→境、縁
です。
次はイラストに例えて見てみましょう。
風船に例えてみる
ちょっと説明としては全て的確にはできなかったですが、初心者の入りとしてはこのくらいわかればオッケイというような説明をしますね。
ここに( ^ω^ )がいます。これが要素、つまり<p>や<img>です。
これを風船の中に入れます。この風船がborderです。今は何もしてないので、ぺっちゃんこです。
風船に空気を入れます。この中の空気がpaddingです。
さらに風船は周りに余白を作ることができます。これがmarginです。
こんな感じです。borderに対して内側にあるのがpadding
外側にあるのがmarginということになります。
ちなみにborderの数値を変える時のイメージは、風船の生地の厚みが変わるとイメージしましょう。
こんな感じです！paddingはボタンを作る時、marginは周りとの感覚を空けたい時に使えます。
コメントを残す