marginとpaddingとの違いについて

初めに！

・ProgateのHTML＆CSSの初級レッスンを終えて躓いたところを備忘録として書いていきます。

marginとpaddingの違いについて

・margin

　borderの外側の空白

・padding

　borderの外側の空白

こんなイメージを持っていただければいいと思います。

理解するまでに至った過程

・実際にborderを表示させてmargin、paddingを使用してみると上のイメージが具体的になり理解ができると思います。

実際のコード

＜HTMLコード＞

<div class="contents">
        <h3 class="section-title">学べるレッスン</h3>
        <div class="contents-item">
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
          <p>HTML & CSS</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
          <p>PHP</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
          <p>Ruby</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
          <p>Swift</p>
        </div>
      </div>

＜CSSのコードとプレビュー＞  

・プレビュー画像をみるとmarginはborderの外側であること。paddingはborderの内側　

    であることがはっきりとわかると思います。