【HTML／CSS】モバイル表示でdiv間の細い隙間が消せない

発生している問題

HTMLを書いていますが、モバイル表示のときに意図しない薄い隙間が表示されてしまいます。
font-size,padding,marginなどを0にしてみましたが上手く行きません。

Windows:10
Chrome:バージョン96
※モバイル表示のモードでなければ隙間は表示されない。

具体的な内容

以下のHTMLをChromeで開き、デベロッパーツール(F12)を開き、
『デバイスのツールバーの切り替え』でモバイル表示にして、サイズを例えば『iPad』にすると、
divとdivの間に隙間ができて、細い白い線が表示されてしまいます。

<!DOCTYPE html>
<html>
<head>
<style>
div {
	height: 100px;
	background-color: #58e0ff;
	font-size:0;
	line-height:0;
	padding:0;
	margin:0;
}
</style>
</head>
<body>
	<div></div><div></div>
</body>

↓非常に細いですが隙間が空いて、細い白い線が表示されています。

助言いただければ幸いです。

itagagaki

2021/11/22 08:28

再現しませんでした。

timer

2021/11/22 08:49

申し訳ありません。質問に記載した以上の条件が思いつかず、追加情報を記載することができません。かなり薄い線ですので、ディスプレイが小さいと見えなかったりするかもしれません（当方15.6インチ）。強いて言えば、サイズを『iPad』に設定した場合、拡大率を75%にすると線が細すぎて目を凝らさないとと見えませんが、50%、100%にすると少し見えやすくなります。

Lhankor_Mhy

2021/11/22 08:55

Chrome のズームレベルは100%ですか？

timer

2021/11/22 08:59

はい、100%です。

timer

2021/11/22 09:02

念のため、モバイル表示のモードでなければ隙間は表示されない旨、追記しました。

itagagaki

2021/11/22 09:04

再現しました。 heightによっても変わりますね。 height: 97px; だとちょうど消える感じ。 blinkまたはdevtoolの問題なのでは。

timer

2021/11/22 09:09

実際に本番サーバにアップして当方のスマホ（Galaxy S21/Chrome）で見てもうっすらと線が入ってしまうため、なんとか解決したい次第です。

行動規範の内容に同意します

回答3件

（本質的ではないですし、マジックナンバーを使うのは褒められたことではないと思いますが、絶対配置で微調整することも可能かと…）

CSS
1div:last-child {
2    position: absolute;
3    width: calc(100% - 16px);
4    top: 107px;
5    height: 101px;
6}

bodyのmarginなくすと、わかりやすくなるのでそれも。

CSS
1body {
2    margin: 0;
3    position: relative;
4}
5div:last-child {
6    position: absolute;
7    width: 100%;
8    top: 99px; /* 本来100pxだが、隙間消すために99pxに。99.5pxとかでも試すとよいかも… */
9    height: 101px; /* 上に詰めた1px分高く */
10}

投稿2021/11/22 16:36

編集2021/11/22 16:51

mmkkmm

総合スコア103

timer

2021/11/23 01:18

ご回答ありがとうございます！！教えていただいたやり方で隙間を完全に見えなくすることができました。

行動規範の内容に同意します

理由はわかりませんが、もし下記が回避策になれば。

CSS
1div{
2  height: 98px; # 2px少なくして
3  border-top: 1px solid #58e0ff; # そのうち1pxを上のボーダーに
4  border-bottom: 1px solid #58e0ff; # あと1pxを下のボーダーに
5  background-color: #58e0ff; # この背景色とボーダーの色は同じにする
6  padding: 0;
7  margin: 0;
8}

DevToolでは完璧に隙間が消えたわけではありませんでしたが、軽減はされました。
実機で隙間が消えることを願います。

投稿2021/11/22 09:30

itagagaki

総合スコア8402

timer

2021/11/22 09:57

ご回答ありがとうございます！隙間がほとんど分からなくなりました。実機のほうも完全に消えてはくれませんでしたが、なかなか気づく人もいないレベルにはなりましたので、これで前に進めそうです。

行動規範の内容に同意します

これどうですか?
ちょっとだけ縦に伸ばす。

css
1div {
2  height: 100px;
3  background-color: #58e0ff;
4  font-size: 0;
5  line-height: 0;
6  padding: 0;
7  margin: 0;
8  transform: scaleY(1.001);
9}