HTML、CSSでサイトを作っています。
Chromeの拡張機能「full page screen capture」でキャプチャしたところ、
画像右横のスクロールバー部分に隙間ができていました。

HTML
1<div class="wrapper">
2		<div class="l-main">
3			<div class="main-image">
4				<img src="images/main-image01.jpg">
5				<img src="images/main-image02.jpg">
6				<img src="images/main-image03.jpg">
7			</div>

CSS
1.wrapper {
2	width:100%;
3	overflow:hidden;
4}
5.l-main {
6	position: relative;	
7	top: 0;
8	left: 0;
9}
10.main-image img {
11	display: block;
12	position: absolute;
13	z-index: 1;
14	top: 0;
15	left: 0;
16	margin: 0 auto;
17	padding: 0;
18}

まだまだ初心者なもので、わかりにくい質問文ですみません。
何度か調べて試してみても隙間がなくならず、困っています。
教えていただけるとうれしいです。

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

回答1件

ベストアンサー

Firefoxもですが，スクロールバー部分の隙間は仕様です．

css
1body{
2  width: 100vw;
3  height: 100vh;
4  overflow: hidden;/*ここポイント*/
5}

overflow: hidden;で，スクロールバーが出なくなるのでそれでスクショしてみてください

以下余談

htmlは閉じタグを忘れないようにしてください

また，以下のHTML,CSSをベースにやってみてください．
ボックスのサイズの計算がしやすくなるはずです

html
1<!DOCTYPE html>
2
3<html lang="ja">
4
5    <head>
6        <meta charset="utf-8">
7        <meta name="format-detection" content="telephone=no, address=no, email=no">
8        <meta name="viewport" content="width=device-width, initial-scale=1.0">
9        <meta http-equiv="X-UA-Compatible" content="IE=edge">
10        <link rel="stylesheet" href="">
11        <title>demo</title>
12    </head>
13    <body>
14        <!--コンテンツ-->
15    </body>
16
17</html>

css
1*,
2*::before,
3*::after{
4  font-weight: normal;
5  line-height: 1em;/*任意*/
6  padding:0;
7  margin: 0;
8  box-sizing: border-box;
9  /*-webkit-tap-highlight-color:rgba(255,255,255,.1);*//*任意*/
10}
11html,body{
12  width: 100vw;
13  height: 100vh;
14  overflow-x: hidden;
15}
16html{
17  font: normal 17px / 17px sans-serif;/*任意*/
18  -webkit-text-size-adjust: 100%;
19}
20body{
21  position: relative;
22}