目次
marginとpaddingの違い
マージンとパディングの違いを解説していきます!!
上のスペース設定
margin-top: 20px;とpadding-top: 20px;の違い
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .mrgbox{ width: 500px;/* 横幅の設定 */ margin-top: 20px;/* 上のスペース設定 */ background-color: #ccc;/*背景カラーの設定*/ border: 1px solid #ddd;/*boxの周りの線*/ } .padbox{ width: 500px;/* 横幅の設定 */ padding-top: 20px; /* 上のスペース設定 */ background-color: #ccc;/*背景カラーの設定*/ border: 1px solid #ddd;/*boxの周りの線*/ } </style> <div class="mrgbox"> <p>マージンのボックス</p> </div> <div class="padbox"> <p>パディングのボックス</p> </div> |
表示サンプル
マージンのボックス
パディングのボックス
左のスペース設定
margin-left: 20px;とpadding-left: 20px;の違い
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> mrgbox{ width: 500px;/* 横幅の設定 */ margin-left: 20px;/* 左のスペース設定 */ background-color: #ccc;/*背景カラーの設定*/ border: 1px solid #ddd;/*boxの周りの線*/ } .padbox{ width: 500px;/* 横幅の設定 */ padding-left: 20px; /* 左のスペース設定 */ background-color: #ccc;/*背景カラーの設定*/ border: 1px solid #ddd;/*boxの周りの線*/ } </style> <div class="mrgbox"> <p>マージンのボックス</p> </div> <div class="padbox"> <p>パディングのボックス</p> </div> |
表示サンプル
マージンのボックス
パディングのボックス
下のスペース設定
margin-bottom: 20px;とpadding-bottom: 20px;の違い
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> mrgbox{ width: 500px;/* 横幅の設定 */ margin-bottom: 20px;/* 下のスペース設定 */ background-color: #ccc;/*背景カラーの設定*/ border: 1px solid #ddd;/*boxの周りの線*/ } .padbox{ width: 500px;/* 横幅の設定 */ padding-bottom: 20px; /* 下のスペース設定 */ background-color: #ccc;/*背景カラーの設定*/ border: 1px solid #ddd;/*boxの周りの線*/ } </style> <div class="mrgbox"> <p>マージンのボックス</p> </div> <div class="padbox"> <p>パディングのボックス</p> </div> |
表示サンプル
マージンのボックス
パディングのボックス
全体の設定
margin: 20px;とpadding: 20px;の違い
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> mrgbox{ width: 500px;/* 横幅の設定 */ margin: 20px;/* スペース設定 */ background-color: #ccc;/*背景カラーの設定*/ border: 1px solid #ddd;/*boxの周りの線*/ } .padbox{ width: 500px;/* 横幅の設定 */ padding: 20px; /* スペース設定 */ background-color: #ccc;/*背景カラーの設定*/ border: 1px solid #ddd;/*boxの周りの線*/ } </style> <div class="mrgbox"> <p>マージンのボックス</p> </div> <div class="padbox"> <p>パディングのボックス</p> </div> |
表示サンプル
マージンのボックス
パディングのボックス
