display:flex;を付けると余白が生じる理由

下記cssの.topにdisplay:flex;を付けると上下に余白が出来るのは何故でしょうか？
.topにjustify-content:space-around;またはaling-items:center;を加えたところ予約は消えました
どうして余白が生じるのか原因が分からず困っております
詳しい方ご教示くださいm(__)m

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="X-UA-Compatible" content="IE=Edge">
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7	<title>html-video</title>
8
9	<!-- 独自CSS -->
10	<link rel="stylesheet" type="text/css" href="style.css">
11</head>
12<body>
13
14<!-- top -->
15<div class="top">
16	<video id="video1" src="ビデオのURL" muted autoplay loop>
17		<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
18	</video>
19
20	<div class="headline">
21		<h2>Headline here</h2>
22		<p>This is a sample text.</p>
23	</div>
24</div>

css
1body {
2	font-family: 'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
3	margin: 0 auto;
4}
5
6/*--------------トップ-----------------*/
7.top {
8	height: 100%;
9	background: none;
10	position: relative;
11}
12
13.top video {
14	display: block;
15	width: 100%;
16}
17
18.headline {
19	position: absolute;
20  text-align: center;
21	top: 50%;
22	left: 50%;
23	-ms-transform: translate(-50%,-50%);
24	-webkit-transform: translate(-50%,-50%);
25	transform: translate(-50%,-50%);
26}
27
28.headline h2 {
29	margin: 0;
30    font-size: 52px;
31    color: #fff;
32	}
33
34.headline p {
35	color: #fff;
36	font-weight: 100;
37}
38
39/*------------------------------------*/
40/*--------------スマホ-----------------*/
41/*------------------------------------*/
42@media screen and (max-width: 480px) {
43/*--------------トップ-----------------*/
44.top {
45    background: url(img/topimg.jpg);
46    position: relative;
47    height: 100vh;
48    background-size: cover;
49    background-position: center;
50    background-repeat: no-repeat;
51}
52
53.top video {
54	display: none;
55}
56
57.headline {
58	width: 100%;
59	position: absolute;
60}
61
62.headline h2 {
63  margin: 0;
64  font-size: 36px;
65  color: #fff;
66}
67
68.headline p {
69	color: #fff;
70	font-weight: 100;
71}
72}

yoshinavi

2018/09/26 23:54

この提示コードで症状は再現されていますか？

tanakashouzoux

2018/09/28 07:33

コメントありがとうございます！症状は再現されておりますm(__)m上下に余白が出来ております

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

回答2件

サンプル通りに検証してみましたが再現しませんでした。(mac chrome)
もう少し詳細な環境を記載してください。
PCかSPか、ブラウザは何か。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="X-UA-Compatible" content="IE=Edge">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<title>html-video</title>
8
9<!-- 独自CSS -->
10<style>
11body {
12  font-family: 'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
13  margin: 0 auto;
14}
15</style>
16</head>
17<body>
18
19<!-- top -->
20<div class="top">
21    <video id="video1" src="ビデオのURL" muted autoplay loop>
22        <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
23    </video>
24
25    <div class="headline">
26        <h2>Headline here</h2>
27        <p>This is a sample text.</p>
28    </div>
29</div>
30</body>
31</html>