marginプロパティ・paddingプロパティ

2023 12/29

2023.07.30 2023.12.29

記事の内容

margin

marginプロパティは、ボックスボーダー外側の余白を指定できるプロパティになります。

marginプロパティ

記法

margin : 余白の長さ
margin-top : 上余白の長さ
margin-buttom : 下余白の長さ
margin-left : 左余白の長さ
margin-right : 右余白の長さ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>marginプロパティに関して</title>
  </head>

  <body>
    <div class="text-area">
      <div class="nomal">marginなし</div>
      <div class="margin">marginあり</div>
    </div>
  </body>
</html>

.text-area {
  background-color: #ebeaeb;
  display: inline-block;
  width: auto;
}
.nomal {
  border: 2px solid black;
}
.margin {
  margin: 1rem;
  border: 2px solid black;
}

出力結果

marginなし

marginあり

padding

paddingプロパティは、ボックスボーダー内側の余白を指定できるプロパティになります。

paddingプロパティ

記法

padding : 余白の長さ
padding-top : 上余白の長さ
padding-buttom : 下余白の長さ
padding-left : 左余白の長さ
padding-right : 右余白の長さ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title> paddingプロパティに関して</title>
  </head>

  <body>
    <div class="text-area">
      <div class="nomal">
        paddingなし
      </div>
      <div class="padding">
        paddingあり
      </div>
    </div>
  </body>
</html>

.text-area {
  background-color: #ebeaeb;
  display: inline-block;
  width: auto;
}
.nomal {
  border: 2px solid black;
}
.padding {
  padding: 1rem;
  border: 2px solid black;
}

出力結果

paddingなし

paddingあり