div {
height: 20mm;
width: 50mm;
border: 1px solid black;
}
のように境界線を引くと先の太さ分 外側に大きくなりズレてしまう。
そんなときは以下のように太さと同一のサイズで負のマージンを設定すると相殺されてズレなくなる。
div {
height: 20mm;
width: 50mm;
border: 1px solid black;
margin: -1px;
}
追記
コメントで教えてもらったので調べました。
元々、印刷用のレイアウトで mm 単位で指定した時に困ったのですが、box-sizing: border-box;
を指定すると境界線が指定したサイズの内側に引かれるようになるためずれなくなる。
div {
height: 20mm;
width: 50mm;
border: 1px solid black;
box-sizing: border-box;
}
上の方法と挙動が若干違うので使い分けると便利そうですね。
hakuho01 さん、ありがとうございました。