marginとpaddingの違い 〜CSS〜

2020年8月18日

marginとpaddingの違い 〜CSS〜

marginとpaddingは、余白の指定をすることです。
どのような違いがあるのでしょう。

1.marginとpaddingの違い

  • margin:要素の外側の余白
  • padding:要素の内側の余白

※要素とは?
要素というのは、<タグ>〜</タグ>の固まりを表します。
たとえば、<p>これは要素です。</p>は1つの要素です。
この固まりを要素と呼びます。

2.marginの書き方

  • 上にスペースをあける。
  • margin-top:30px; (上に30pxスペースをあける。)

    margin-top:50px; (上に50pxスペースをあける。)

  • 下にスペースをあける。
  • margin-bottom:30px; (下に30pxスペースをあける。)

    margin-bottom:50px; (下に50pxスペースをあける。)

  • 右にスペースをあける。
  • margin-left:30px; (右に30pxスペースをあける。)

    margin-left:50px; (右に50pxスペースをあける。)

  • 左にスペースをあける。
  • margin-right:30px; (左に30pxスペースをあける。)

    margin-right:50px; (左に50pxスペースをあける。)

  • 上下左右にスペースをあける。
  • margin:30px; (上下左右に30pxスペースをあける。)

    margin:50px; (上下左右に50pxスペースをあける。)

  • 上下に同じスペース、左右に同じスペースをあける。
  • margin:10px 50px 80px; (上に10px、左右に50px、下に80pxスペースをあける。)

  • 左右は同じスペースで、上と下は違うスペースをあける。
  • margin:10px 30px; (上下に10px、左右に30pxスペースをあける。)

    margin:20px 50px; (上下に20px,左右に50pxスペースをあける。)

  • 上下左右、あけるスペースの値が違う場合。
  • margin:10px 20px 30px 40px; 
    (上に10px、右に20px、下に30px、左に30pxスペースをあける。)

    ※上から、時計回り。

    3.paddingの書き方

    ☆paddingのと同じ

  • 上にスペースをあける。
  • padding-top:30px; (上に30pxスペースをあける。)

    padding-top:50px; (上に50pxスペースをあける。)

  • 下にスペースをあける。
  • padding-bottom:30px; (下に30pxスペースをあける。)

    padding-bottom:50px; (下に50pxスペースをあける。)

  • 右にスペースをあける。
  • padding-left:30px; (右に30pxスペースをあける。)

    padding-left:50px; (右に50pxスペースをあける。)

  • 左にスペースをあける。
  • padding-right:30px; (左に30pxスペースをあける。)

    padding-right:50px; (左に50pxスペースをあける。)

  • 上下左右にスペースをあける。
  • padding:30px; (上下左右に30pxスペースをあける。)

    padding:50px; (上下左右に50pxスペースをあける。)

  • 上下に同じスペース、左右に同じスペースをあける。
  • padding:10px 50px 80px; (上に10px、左右に50px、下に80pxスペースをあける。)

  • 左右は同じスペースで、上と下は違うスペースをあける。
  • padding:10px 30px; (上下に10px、左右に30pxスペースをあける。)

    padding:20px 50px; (上下に20px,左右に50pxスペースをあける。)

  • 上下左右、あけるスペースの値が違う場合。
  • padding:10px 20px 30px 40px; 
    (上に10px、右に20px、下に30px、左に30pxスペースをあける。)

    ※上から、時計回り。

CSS

Posted by decotto703