CSSサイズ計算機
widthとpadding・border・marginから、要素の見た目の大きさと、占める幅・高さを、box-sizingの違いも含めて計算します。
見た目の幅 × 高さ(borderまで)—
計算式
- content-box: 見た目の幅 = width + padding × 2 + border × 2
- border-box: 見た目の幅 = width(paddingとborderを含む)
- 占める幅 = 見た目の幅 + margin × 2
使い方のヒント
marginの相殺(縦に隣り合う要素のmarginが、大きいほうに合わさる現象)は考慮していません。レイアウトが崩れやすいときは、全要素にborder-boxを指定するのが、定番の対処です。
関連ツール
よくある質問
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単位計算機などがあります。