CSS marginとpaddingとは？【CSS 余白】CSSを使って余白を作成

p {
  background: #〇〇;
  margin: 〇px;
}

 
「P」タグで囲んだ背景色は『#〇〇』になり、外側に〇pxの余白ができる。

『#〇〇』の部分に色のコードを入れて『〇px』に数字を入れよう。仮に#ff99ccと50pxを入れてみよう。
色見本のコードはこちら

<p>外側に余白50px</p>

 
「P」タグで囲む。

.blue {
  background: #0099ff;
  padding: 50px;
}
.green {
  background: #66ff66;
}
.pink {
  background: #ff99cc;
  margin: 50px;
}

 
それぞれ、class属性の値を追加。青には内側余白50px（padding)を指定、緑は(padding margin）指定なし、ピンクは外側余白50px(margin)を指定。

<p class="blue">内側に余白50px</p>
<p class="green">marginとpadding指定なし</p>
<p class="pink">外側に余白50px</p>

 
「P」タグで囲み、それぞれ、class属性を追加。

p {
  background: #0099ff;
  margin-top: 10px;
}

 
「P」タグで囲んだ背景色の外側の上部に10pxの余白ができます。

body {
  background: #0099ff;
  width: 50%; /*横幅50％*/
  margin: 0 auto;
}

 
この場合、bodyタグで囲んだ文字の背景が全体の横幅の50％になり、margin: 0 autoを指定したことによって、左右幅の中央揃えになります。

body {
  background: #0099ff;
  width: 50%; /*横幅50％*/
  margin-right: auto;
}

 
この場合、bodyタグで囲んだ文字の背景が全体の横幅の50％になり、margin-right: autoを指定したことによって、右揃えになります。

CSS marginとpaddingとは？【CSS 余白】CSSを使って余白を作成のまとめ

CSS marginとpaddingとは？【CSS 余白】CSSを使って余白を作成！の記事はいかがでしたか？CSSを使用して背景や文字に余白を追加できる、marginとpadding。是非セットで覚えておくことをおすすめします！