縦方向に微妙な余白が出来てしまう

抱えている問題

高さ100vhのボックスを3つ作り、それぞれの幅は33.3%、33.4%、33.3%。そのボックスのバックグラウンドに画像を指定するみたいなことをやっているのが上記の画像です。
ただ実際にブラウザで確認してみると画面が少しだけスクロール出来ます。分かりやすいようにbodyのbackgorund-colorをredにしておきました。

試してみたこと

ボックスにマージンがついているか確認してみましたが、マージンはついていませんでした。
またデベロッパーツールで赤い領域をクリックして詳細を確認しようとしましたが、クリック出来ませんでした。なんでですかね...。

コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="oya">
	<div class="ichi"></div><div class="ni"></div><div class="san"></div>
</div>


<!--リンクの読み込み -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--リンクの読み込みの終わり-->

</body>
</html>

body{
    padding:0;
    margin:0;
    background:red;
}

.ichi{
    width:33.3%;
    height:100vh;
    background-image:url("2.jpg");
    background-size: cover;
}
.ni{
    width:33.3%;
    height:100vh;
    background-image:url("3.jpg");
    background-size: cover;
}
.san{
    width:33.4%;
    height:100vh;
    background-image:url("4.jpg");
    background-size: cover;
}
.ichi,.ni,.san{
    display: inline-block;
}

追記

box-sizing:border-boxにしたら解決しました。でも解決した理由がよくわかりません。。。；；

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

回答2件

ベストアンサー

.ichi,.ni,.sanをinline-blockにすることにより、余白が生まれています。
inline-blockにすると、周りのスペースや改行が、余白として認識されてしまいます。

その対処法として、.oyaにfont-size: 0;でも解決するのですが、

css
1.ichi,.ni,.san{
2    display: inline-block;
3}

をなくして

css
1.oya {
2  display: flex;
3}

にするのが良いと思います。

また、flexにするなら、.ichi,.ni,.sanに計算した結果を幅指定するのではなく、
flexで指定すれば均等になります。

css
1.ichi,.ni,.san{
2  flex: 1;
3}

投稿2019/03/04 09:15

編集2019/03/04 09:20

kszk311

総合スコア3404

usui_orange

2019/03/04 09:20

ありがとうございます。横だけではなく縦にも余白が出来るんですね。感謝です；；

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

デフォルトで「img」はインラインであり、「vertical-align」は「baseline」に設定されている事が多いのが理由かもしれません。

解決方法としてこう言うのも参考になるかと思います。

参考先：
画像の下に”謎の隙間”ができるのを解決するCSS

-追記-

imgではなくdivの背景設定でしたね。早とちりでした。
(^^;)

投稿2019/03/04 09:12

編集2019/03/04 09:19

yoshinavi

総合スコア3523

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！