プリセット

マージン（外側余白）

パディング（内側余白）

ボックスモデル

ライブプレビュー

コンテンツ

CSS 出力

使い方
  1. プリセットを選択するか、スライダー／数値入力で自由に設定します。
  2. 単位を選択 — px、rem、em、% から選べます。
  3. マージン（外側余白）とパディング（内側余白） を上下左右それぞれ調整します。
  4. 「全辺を連動させる」 をオンにすると、4辺を同時に変更できます。
  5. ボックスモデル図とライブプレビュー がリアルタイムで更新されます。
  6. ショートハンドまたはロングハンド を選んで「CSSをコピー」をクリックします。
ボックスモデルの基本
層役割
マージン要素の外側の余白。隣接要素との距離
ボーダー要素の境界線（別途 border で設定）
パディングボーダーの内側、コンテンツとの余白
コンテンツテキストや画像などの実際の内容
CSSショートハンドの書き方
値は 上 → 右 → 下 → 左 の時計回りで指定します。
/* 1つの値: 全辺同じ */
margin: 16px;

/* 2つの値: 上下  左右 */
padding: 12px 24px;

/* 3つの値: 上  左右  下 */
margin: 8px 16px 24px;

/* 4つの値: 上 右 下 左 */
padding: 8px 16px 12px 16px;

関連ツール
フリーランス・個人事業主の方へ
Webデザインの収益管理も、freeeなら簡単。請求書発行・確定申告・経費管理をまとめて自動化できます。
freeeを無料で試す