Edited at

CSSで任意サイズの枠線を%指定のボックスぴったりに収める

More than 1 year has passed since last update.


背景

指定等で枠線をつけると、枠線は対象の外側に引かれるためサイズがぴったりにならない

これの防止をする。

主として健忘症である未来の自分へのメモ


実装

※Chromeでのみ動作確認済み


css

.class{

--b:5px; /* 枠線のサイズ指定 */
Width:calc(100vw - calc(var(--b)*2)); /* 枠線は左右に2本入るため枠線のサイズかける2をした数を引く */
Height:calc(50vh - calc(var(--b)*2)); /* 枠線は上下に2本入るため枠線のサイズかける2をした数を引く */
border: var(--b) solid #fff; /* 枠線指定 */
}

See the Pen border perfect by hashito (@hashito) on CodePen.


追記


背景

@takamoso 様からコメントを頂き、「そこまでしなくても、box-sizing を使えばできますよ。」とのこと…


調査

box-sizingがわからなかったので調べてみると

「ボックスサイズの算出方法の指定、border-boxに指定すればpaddingborderの幅を含める」

ということで探していたのはまさにこれです


例/デモ

例としてコードも頂きましたので、下記に転記させていただきます。

div{

box-sizing: border-box;
width: 100%;
height: 100%;
border: 5px solid #f00;
background: #000;
}

デモ

See the Pen border perfect2 by hashito (@hashito) on CodePen.

@takamoso 様コメントありがとうございました。