１．ボックスモデルとは

Chromeデベロッパーツールに表示されている下記のような画像について説明します。
HTMLの要素(タグ)はどの要素もボックスと呼ばれる四角形の領域を生成します。

content（コンテンツ）
テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅）と height（高さ）プロパティで指定することができます。

padding（パディング）
content と border の間にある余白の領域です。要素の内側の余白を取るために使います。この領域のサイズは padding プロパティで指定することができます。

border（ボーダー）
padding の外側にある領域、いわゆる枠線です。この領域のサイズは border-width プロパティで指定することができます。

margin（マージン）
ボックスの一番外側の余白の領域です。この領域のサイズは margin プロパティで指定することができます。

２．ブロックボックスとインラインボックス

ボックスはブロックボックスとインラインボックスの2種類に分けられます。
CSSのdisplayプロパティの値によってボックスの種類が決まります。

2.1 ブロックボックスの特徴

要素の幅に関係なく、上から下へ縦方向に配置される。（ブロックボックスの前後には改行が伴って、1つの段落としてレイアウトされる）
幅（width）や高さ（height）を指定できる。※幅を指定しなければ親要素の幅全体に広がる。
上下左右の margin 、padding を指定できる
displayプロパティのデフォルトはblockです。

2.2 ブロックレベル要素のタグ例

<div>、<p>、< ul>、< ol>、<li>、<table>など

2.3 インライン要素の特徴

幅・高さを指定できない
上下マージンを設定できない
左から右へ横方向に配置される（改行されない）
displayプロパティのデフォルトはinlineです。

2.4 インライン要素のタグ一例

<a>、<br>、<font>、<img>、<select>、<span>、<textarea>など

確かめてみよう

ブロックボックスは、上から下へ(改行されて)配置され、
インラインボックスは、左から右へ配置されていくのが下記ソースで確認できます。
また、全てのdivタグのdisplayプロパティにinlineを指定し、pタグとの見た目を確認してみてください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div1 {
        background-color: greenyellow;
      }
      #div2 {
        background-color: khaki;
      }
      #div3 {
        background-color: lightblue;
      }
      #span1 {
        background-color: lightpink;
      }
      #span2 {
        background-color: lightyellow;
      }
      #span3 {
        background-color: mediumslateblue;
      }
    </style>
  </head>
  <body>
    <div id="div1" class="box">----- ↓↓↓↓↓ブロックボックス -----</div>
    <div id="div2" class="box">ボックスモデル</div>
    <div id="div3" class="box">----- ↑↑↑↑↑ -----</div>
    <span id="span1" class="inline">----- ↓↓↓↓↓インラインボックス -----</span>
    <span id="span2" class="inline">インラインボックス</span>
    <span id="span3" class="inline">----- ↑↑↑↑↑ -----</span>
  </body>
</html>

ここにdivタグにdiplay: inlineを指定している説明があります。

ブロックボックス、インラインボックスそれぞれに
幅（width）や高さ（height）、上下左右の margin 、paddingを指定し表示を確認してみてください。
(上記ソースの各要素にheight,width,pading,marginを指定しました。)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 1rem;
        padding: 1rem;
        border: solid;
        border-width: 0.5rem;
        border-color: black;
      }
      .inline {
        margin: 1rem;
        padding: 1rem;
        border: solid;
        border-width: 0.5rem;
        border-color: black;
      }
      #div1 {
        background-color: greenyellow;
        width: 200px;
        height: 50px;
      }
      #div2 {
        background-color: khaki;
        width: 50px;
        height: 200px;
      }
      #div3 {
        background-color: lightblue;
        width: 200px;
        height: 200px;
      }
      #span1 {
        background-color: lightpink;
        width: 200px;
        height: 50px;
      }
      #span2 {
        background-color: lightyellow;
        width: 50px;
        height: 200px;
      }
      #span3 {
        background-color: mediumslateblue;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="div1" class="box">----- ↓↓↓↓↓ブロックボックス -----</div>
    <div id="div2" class="box">ボックスモデル</div>
    <div id="div3" class="box">----- ↑↑↑↑↑ -----</div>
    <span id="span1" class="inline">----- ↓↓↓↓↓インラインボックス -----</span>
    <span id="span2" class="inline">インラインボックス</span>
    <span id="span3" class="inline">----- ↑↑↑↑↑ -----</span>
  </body>
</html>

５．paddingとmargin、marginの相殺

5.1 paddingとmargin

下記ソースを元に、paddingとmariginの効いている箇所を確認してください。
また、Chromeデベロッパツールに表示されるボックスモデルの画像も確認しておいてください。

指定方法には、padding(marigin)と纏めて書く方法とpadding-top(margin-top)のように個別に指定する方法があります。
padding(marigin)と纏めて書く方法では、topから時計回りに４つ指定します。
１つ指定した場合は、top,right,bottom,leftすべてに同じ値が適用されます。
２つ指定した場合は、topとbottomに１つ目の値、rightとleftに２つ目の値が適用されます。
３つ指定した場合は、XXXXXXXXXX。下のソースで確認してみてください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #a {
        padding: 10px;
        margin: 50px;
        background-color: chartreuse;
      }
      #b {
        padding: 12px 13px;
        margin: 14px 15px;
        background-color: coral;
      }
      #c {
        padding: 16px 17px 18px;
        margin: 19px 20px 21px;
        background-color: darkmagenta;
      }
      #d {
        padding-top: 22px;
        padding-right: 23px;
        padding-bottom: 24px;
        padding-left: 25px;
        margin-top: 22px;
        margin-right: 23px;
        margin-bottom: 24px;
        margin-left: 25px;
        background-color: hotpink;
      }
    </style>
  </head>
  <body>
    <div id="a">あいうえお</div>
    <div id="b">かきくけこ</div>
    <div id="c">さしすせそ</div>
    <div id="d">たちつてと</div>
  </body>
</html>

5.2 marginの相殺

結論から言うと、重なったmarginは大きい方が採用されます。
上記例だと、id="a"のdivタグはmargin-bottom: 50px、id="b"のdivタグのmargin-top: 14pxとなっており、id="a"とid="b"間のmarginは50pxになります。

７．実際のwidth,height

ここまで確認してきたソース、ボックスモデル画像の内容を確認すると実際の幅と高さには、borderやpaddingの大きさも含まれていることが分かります。
ですので、cssで指定した幅、高さはborderやpaddingの分見た目は大きくなります。

下記ソースで確認してみましょう。
divタグの幅は100pxですが、paddingの指定により100px以上の大きさになっています。

      #e {
        width: 100px;
        padding: 200px;
        background-color: skyblue;
      }

    <div id="e">なにぬねの</div>

box-sizing: border-box

borderもpaddingもwidthに含めるというCSS指定も可能です。

下記ソースで確認してみてください。
width: 200pxとしています。
padding: 20pxは200px内に含められていることが分かります。

chromeデベロッパツールのボックスモデルでも確認してみてください。

      #e {
        width: 200px;
        padding: 20px;
        background-color: skyblue;
        box-sizing: border-box;
      }

    <div id="e">なにぬねの</div>

4-2 CSS ボックスモデル