Webmediaデザイン・コーディングセキュリティバックエンドCMSプロデュース・ディレクションWeb便利ツールpaddingとmarginは何が違う?特徴と使い方のポイントを紹介!デザイン・コーディングpaddingとmarginは何が違う?特徴と使い方のポイントを紹介!2019/11/07ShareTweetpaddingとmarginが余白を設定するプロパティだとなんとなく分かっていても、何が違うか分からないという人もいるのではないでしょうか。HTMLで文書構造を作り、CSSでWebサイトの全体的なバランスとデザインを付け加えれば、誰でも見やすいWebサイトとなりますよね。paddingとmarginはともに余白を設定するプロパティですが、役割が大きく違います。paddingとmarginのどちらのプロパティを、正しく使い分けることができれば、美しいデザインを作ることができます。今回は、混同されがちなpaddingとmarginの違いと、記述方法、使い方のポイントについて紹介します。古いWebサイトにさようなら。次世代技術と最新デザインでユーザーを獲得。https://www.itra.co.jp/index.htmlデザインからシステムやセキュリティまで、ワンストップでサポートできるからこそ、官公庁や大企業から選ばれ続けてきました。見た目の良いWebサイトを作るだけではなく、最先端の技術力とデザイン力を持って、クライアントの課題を解決できるWebサイトをご提案します。目次paddingとmarginの違いpaddingとmarginの記述方法paddingとmarginのルールまとめpaddingとmarginの違いpaddingとmarginが、どちらも余白を指定するCSSのプロパティだということは分かっても、非常に多くの方が混同してしまっています。実は、paddingとmarginがいったいどこの余白を設定しているかは図にすれば簡単に理解できます。今回は図と照らし合わせてわかりやすいように、「こんにちは」という文字の入っている要素の背景色をグレー(カラーコード:#cccccc)にしています。こんにちはHTMLとCSSは以下のようになっています。100;}pタグやdivタグなど、HTMLの要素には箱の形になっている種類があります。これらをブロック要素といいます。この例の場合、pタグという箱の中に「こんにちは」という文字が入っています。見ると「こんにちは」という文字と、箱の境界線の間には余白があり、見えませんが、箱の外側にも余白を付けることが可能です。このように、「こんにちは」という文字と、箱の境界線の間の余白はpadding、箱の外側の余白がmarginになっていますよね。paddingは要素の内側の余白、borderは要素の枠線、marginは要素の外側の余白を指定するプロパティです。paddingとはpaddingとは、テキストコンテンツ自体とテキストコンテンツの境界線、つまり文字と境界線の間の余白です。上の例では、「こんにちは」という文字と黒いborderの間の余白です。marginとはmarginとはテキストコンテンツの境界線の外側の余白を指定するプロパティです。ボックスとボックスの間に余白をつける際に使われます。paddingとmarginの記述方法paddingとmarginの記述方法には、上下左右の余白の数値を指定する際に気をつけるべきルールがあります。paddingとmarginの記述方法はほぼ同じです。paddingの記述方法paddingは、上下左右の内容ボックスの内側の余白を一括で指定するプロパティです。paddingに関する記述方法は4つあります。上2px、下3px、左4px、右5pxのpaddingをつけるための記述方法は、以下のように、上から時計回りの順番で記述します。上下同じpaddingの値、左右同じpaddingの値を指定する場合は、上下・左右のそれぞれの数値を2つ記述することで指定することができます。上下のpaddingを4px、左右のpaddingを2pxにする場合、以下のように記述します。上下左右のpaddingの値をすべて同じ値にする場合は値を1つ書くことで指定できます。上下左右のpaddingを10pxにする場合、以下のように記述します。10px;}4上下左右のpaddingを個別に指定する場合paddingには、上下左右のpaddingを別々に指定する4つのプロパティがあります。padding-topで上のpaddingを指定、padding-bottomで下のpaddingを指定、padding-leftで左、padding-rightで右のpaddingを指定することができます。5px;}marginの記述方法は、paddingと同じく4つの方法があります。上下左右のmarginを個別に指定する場合は、上のmarginを指定する「margin-top」、下のmarginを指定する「margin-bottom」、左のmarginを指定する「margin-left」、右のmarginを指定する「margin-right」でpaddingの値を記述します。他の3つの記述方法はpaddingと同様です。paddingとmarginのルールpaddingやmarginには、CSSの記述をしていく上で知っておくべきルールがあり、注意が必要です。インライン要素にはpadding・marginが効かない余白をつけるプロパティであるpaddingとmarginですが、インライン要素には注意が必要です。インライン要素とは、箱のようなイメージを持つブロック要素とは違い、線のようなイメージです。aタグやspanタグ、imgタグがインライン要素にあたります。paddingは、インライン要素には上下左右の余白を指定することはできますが、上下のpaddingは、上下にある他のボックスの領域にはみ出してしまい、見た目の上では余白がつきません。marginは、左右の余白を指定することはできますが、そもそも上下の余白の指定ができず、左右にしかmarginを適用することができません。paddingはボックス自体の大きさも変えるボックスに対してpaddingを設定すると、ボックス自体の大きさが変わってしまいます。何なぜかと言うと、paddingはボックスの内側の余白が対象のため、paddingを大きくすると、ボックス自体の大きさも大きく変わるからです。こんにちはこんにちは上の2つのボックスのうち、右のボックスにのみpaddingをつけてみます。こんにちはこんにちは右のボックスと左のボックスの上下の大きさが変わりましたよね。paddingをあるボックスに適用すると、ボックスの実際の高さや幅も、適用したpaddingの分だけ大きくなります。そのため、今回のように複数あるボックスのうち、1つのボックスにだけpaddingで余白を適用した場合、他のボックスよりもボックス全体の高さや幅が大きくなってしまいます。横幅はwidthとpaddingを足した合計、高さはheightとpaddingを足した合計となり、計算しなければいけません。【コラム】border-boxでバランスを整える!複数あるボックスの全体のバランスを整えて、widthやheightで指定した数の幅や高さの内側に、paddingが入るようにする方法があります。CSS3で新しく導入された「box-sizing」というプロパティで、「border-box」を指定すると、borderが指定されていてもborderやpaddingをwidth/heightの値に含めるので、ボックス自体の合計の値を計算する必要がありません。marginはマイナスの値を指定することができるmarginは、値にマイナスの数値を指定することができ、ネガティブマージンとも呼ばれます。margin-topにマイナスの値を指定した場合、margin-bottomがmargin-topで指定した数値の分、上に引っ張られます。ネガティブマージンを使用することで、画面いっぱいにボックスを表示することが可能です。上下に結合しているボックスはmarginが相殺される上下に結合されているボックスのtopとbottomにそれぞれmarginの値を指定すると、各値の合計値分marginされずに、各値のうち大きい方の数値が適用されます。これをmarginの相殺といいます。親要素のmargin-topと子要素の1つ目のmargin-topでも相殺が起きます。親要素の上にある他のボックスにmarginの指定がない場合、子要素の1つ目、つまり親要素の上辺にある子要素に指定されているmargin-topの数値と、親要素に指定されているmargin-topの数値のうち、大きい方の数値が適用されます。同じように、親要素と末尾の子要素のmargin-bottomの数値でもmarginの相殺が起きます。まとめ今回はpaddingとmarginの違いと記述方法、特徴的なルールを紹介しました。ボックスとボックスの間に適切な余白をつけることで、誰にとっても見やすいWebサイトを作ることができます。paddingとmarginの特徴的なルールに注意することは、それぞれの良さを生かしたコーディングのための第一歩となるでしょう。WebMediaでは、この記事の他にもHTMLやCSSのコーディングのヒントとなる情報を発信しています。チェックしてみてください。Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか?WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。人気の記事1AdobeのFlash終了に向けた正しい撤収方法と代替案2GoogleのURL短縮サービスが3月で終了。カスタムサーチ」が3月末で終了。