【CSS】marginとpaddingの違い

CSS

2020.09.302020.11.22

marginとpaddingにの違いって何？

こんにちはCSSで余白を決める時marginとpaddingでしている頃が大半だと思います。しかしどっちを使っていいわからなかったり、うまく作用しないことがあると思います。今回は違いを紹介していきます。

marginとpaddingを比べてみよう

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="style2.css" />
</head>
<body>
  <div class="box">
    <h1>maring,passingの違い</h1>
  </div>
  <div class="box box2">
    <h1>maring,passingの違い</h1>
  </div>
  <div class="box">
    <h1>maring,passingの違い</h1>
  </div>
</body>
</html>

.box {
  background-color: #b0e0e6;
  width: 100%;
  margin: 0px;
}

.box2 {
  background-color: #d4b1e6;
}

.padding {
  padding: 20px;
}

.margin {
  margin-top: 20px;
  margin-bottom: 20px;
}

maring,passingの違い

marginがつきます

paddingがつきます

上記のボタンをクリックしてみてください、真ん中の水色のボックスが変化すると思います。

marginを押すとboxの外側に対して余白ができることがわかります。反対にpaddingについては文字とboxの外枠に対して内側に余白ができていることがわかります。

つまり

marginは外側に対しての余白

paddingは内側に要素に対しての余白

が反映されることになります。写真同士の間隔やコンテンツどうしの距離を変えることができます。

ぜひ使ってみてください。