CSSサイズ計算機

widthとpadding・border・marginから、要素の見た目の大きさと、占める幅・高さを、box-sizingの違いも含めて計算します。

px
px
px
px
px
px
px

見た目の幅 × 高さ(borderまで)—

内容の領域(幅 × 高さ)—
marginを含めて占める領域—

計算式

使い方のヒント

marginの相殺(縦に隣り合う要素のmarginが、大きいほうに合わさる現象)は考慮していません。レイアウトが崩れやすいときは、全要素にborder-boxを指定するのが、定番の対処です。

計算例

初期値(指定したwidth 300 px、指定したheight 200 px、左右のpadding(片側) 20 px、上下のpadding(片側) 16 px、borderの太さ 2 px、左右のmargin(片側) 12 px、上下のmargin(片側) 8 px、box-sizing content-box(初期値))のままで計算すると、見た目の幅 × 高さ(borderまで)は 344 × 236 px、内容の領域(幅 × 高さ)は 300 × 200 px、marginを含めて占める領域は 368 × 252 px になります。まずはこの値を基準に、自分の数値へ置き換えて確認してください。

たとえば「指定したwidth」だけを 600 px に変えると、見た目の幅 × 高さ(borderまで)は 644 × 236 px、内容の領域(幅 × 高さ)は 600 × 200 px、marginを含めて占める領域は 668 × 252 px になります。結果がどの入力にどれだけ敏感かを見るときは、入力を1つずつ動かして比べるとわかりやすくなります。

関連ツール

よくある質問

CSSサイズ計算機では何がわかりますか？

widthとpadding・border・marginから、要素の見た目の大きさと、占める幅・高さを、box-sizingの違いも含めて計算します。

何を入力すればいいですか？

次の項目を入力します: 指定したwidth、指定したheight、左右のpadding(片側)、上下のpadding(片側)、borderの太さ、左右のmargin(片側)。内容を変えると、結果もそれに合わせて変わります。

結果にはどんな項目が表示されますか？

「見た目の幅 × 高さ(borderまで)」「内容の領域(幅 × 高さ)」「marginを含めて占める領域」などが表示されます。

どんな計算式を使っていますか？

ページ内の「計算式」にまとめています。たとえば「content-box: 見た目の幅 = width + padding × 2 + border × 2」のような式です。

結果はどのくらい正確ですか？

処理は標準的な仕様に沿っています。本番で使う前に、実際の環境(ブラウザ・OS・言語)で動作を確認してください。

同じカテゴリ(CSS・単位)の他のツールはありますか？

はい。CSS単位変換機、px→rem計算機、CSS clamp計算機、viewport単位計算機などがあります。

スマホでの利用、入力内容の扱い、結果のコピー、印刷など、全ツールに共通する質問は共通のよくある質問にまとめています。

関連記事