サイトアイコン WEBデザインMATOME

【コーディング初心者向け】marginとpaddingの違い

marginとpaddingの違い

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

上のスペース設定

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

サンプル


マージンのボックス

パディングのボックス

表示サンプル

マージンのボックス

パディングのボックス

左のスペース設定

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

サンプル


マージンのボックス

パディングのボックス

表示サンプル

マージンのボックス

パディングのボックス

下のスペース設定

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

サンプル


マージンのボックス

パディングのボックス

表示サンプル

マージンのボックス

パディングのボックス

全体の設定

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

サンプル


マージンのボックス

パディングのボックス

表示サンプル

マージンのボックス

パディングのボックス

marginとpaddingの違い動画

モバイルバージョンを終了