ToolBoxy
無料登録
🎨

CSS Box Model Visualizer

css · box-model · layout

全体:

上

右

下

左

全体:

上

右

下

左

全体:

上

右

下

左

margin
content
全幅: 284px
全高: 120px
コンテンツ幅: 200px
コンテンツ高さ: 60px
.element {
  width: 200px;
  height: 60px;
  box-sizing: content-box;
  margin: 16px 24px 16px 24px;
  border: 2px solid #6366f1;
  padding: 12px 16px 12px 16px;
}

使い方

  1. 1

    幅・高さ・box-sizingを設定します。

  2. 2

    マージン・ボーダー・パディングを調整します。

  3. 3

    生成されたCSSをコピーします。

FAQ

このツールは無料ですか？

はい、登録もインストールも不要で、すぐに完全無料で使えます。

このツールはどんなツールですか？

CSSボックスモデル（マージン・ボーダー・パディング・コンテンツ）をビジュアルで設定。content-box/border-box対応。 登録もインストールも不要で、ページを開けばすぐに無料でお使いいただけます。