098ra【イラスト解説】paddingとmarginの違いについてわかりやすく説明するよ【初心者向け】marginとpaddingの違いについて、私も最初はつまづいたので絵にして説明してみました。初心者向きにまずはこんな感じに覚えればOKって感じのざっくりとした説明です。そもそもどんな意味?直訳するとpadding→詰め物margin→余白で合わせて覚えたいのがborder→境、縁です。次はイラストに例えて見てみましょう。風船に例えてみるちょっと説明としては全て的確にはできなかったですが、初心者の入りとしてはこのくらいわかればオッケイというような説明をしますね。これが要素、つまり<p>や<img>です。これを風船の中に入れます。この風船がborderです。今は何もしてないので、ぺっちゃんこです。風船に空気を入れます。この中の空気がpaddingです。風船は周りに余白を作ることができます。これがmarginです。borderに対して内側にあるのがpadding外側にあるのがmarginということになります。ちなみにborderの数値を変える時のイメージは、風船の生地の厚みが変わるとイメージしましょう。こんな感じです!paddingはボタンを作る時、marginは周りとの感覚を空けたい時に使えます。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。【女性にオススメ!】ホーチミンのセンスマーケットの写真レポとアクセス方法を紹介するよRECOMMENDこちらの記事も人気です。@098ra0209会社員→小学校の先生→フリーランス国内外を旅しながらホームページ屋をやっている人です。現在は日本各地や東南アジアを転々としながら生活しています。ノマドの働き方や、フリーランスのあれこれについて発信しています。