マージンとパディングの違いを解説していきます!!

上のスペース設定

margin-top: 20px;とpadding-top: 20px;の違い

サンプル

  
マージンのボックス


パディングのボックス
 

表示サンプル

左のスペース設定

margin-left: 20px;とpadding-left: 20px;の違い

サンプル

  
マージンのボックス


パディングのボックス
 

表示サンプル

下のスペース設定

margin-bottom: 20px;とpadding-bottom: 20px;の違い

サンプル

  
マージンのボックス


パディングのボックス
 

表示サンプル

全体の設定

margin: 20px;とpadding: 20px;の違い

サンプル

  
マージンのボックス


パディングのボックス
 

表示サンプル