6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

境界線のズレを相殺する

Last updated at Posted at 2017-10-09
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 さん、ありがとうございました。

6
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?