inputの隙間をなくすには

以下を実行すると画像のようになります。この出発日と帰国日の隙間を埋めるにはどうすれば良いですか。
ぴったりくっついているようにしたいです。

HTML
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3
4<head>
5  <meta charset="utf-8">
6  <title>Travelers公式サイト</title>
7  <link rel="icon" href="favicon.ico">
8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
9  <link rel="stylesheet" href="css/index.css">
10  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
12  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
13</head>
14
15<body>
16  <header>
17
18  </header>
19
20  <main>
21    <div class="container">
22      <form action="" method="post">
23        <p class="lookup"><input type="text" name="" value="" placeholder="目的地など"></p>
24        <p class="lookup">
25          <input class="departuredate" stype="text" name="" value="" placeholder="出発日">
26          <input class="returndate" type="text" name="" value="" placeholder="出発日">
27        </p>
28        <p class="lookup"><input type="text" name="" value=""><span id="btn" class="disabled btn">検索する</span>
29        </p>
30
31      </form>
32    </div>
33
34  </main>
35
36  <div class="voices">
37    <div class="container">
38
39    </div>
40  </div>
41
42  <footer>
43    <div class="container">
44
45    </div>
46  </footer>
47  <script>
48    $(function() {
49      $('.departuredate').datepicker();
50      $('.returndate').datepicker();
51    });
52  </script>
53</body>
54
55</html>
56

CSS
1* {
2  margin: 0;
3  padding: 0;
4  /*全要素のマージン・パディングをリセット*/
5}
6
7h1, h2, h3, h4, h4, h6, p {
8  margin: 0;
9  padding: 0;
10}
11
12body {
13  font-family: Verdana, sans-serif;
14  margin: 0;
15  box-sizing: border-box;
16}
17
18.container {
19  width: 960px;
20  margin: 0 auto;
21  padding: 40px 0;
22}
23
24header {
25  height: 65px;
26}
27
28/*main*/
29main {
30  color: #fff;
31  background: url(../imgs/bg.png);
32  background-size: cover;
33}
34
35input {
36  border-radius: 2px;
37  width: 300px;
38  height: 40px;
39  font-size: 20px;
40}
41
42.btn {
43  background-color: #1e90ff;
44  color: #ffffff;
45  padding: 10px 15px;
46  font-size: 20px;
47  margin-left: 15px;
48  cursor: pointer;
49}
50
51.lookup:not(:last-child) {
52  margin-bottom: 40px;
53}
54
55.lookup:not(:last-child) {
56  margin-bottom: 40px;
57}
58

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

回答3件

改行をなくす。

HTML
1<input class="departuredate" stype="text" name="" value="" placeholder="出発日"><input class="returndate" type="text" name="" value="" placeholder="出発日">

投稿2019/02/08 17:37

kei344

総合スコア69398

Chandler_Bing

2019/02/08 18:00

ありがとうございます。Pをとうるのでしょうか。結果は同じでした。

kei344

2019/02/08 18:11

Pは関係ないです。input要素間の改行と空白を全て削除してください。

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

ベストアンサー

ブラウザ依存の暗黙の空白が出来ちゃうやつじゃないですかね。
改行やインデントなども特殊文字なので改行分の空白が出来てしまう現象だと思います。
対策としてはkei344さんのおっしゃる通り改行や空白をなくすか、どうしても改行して見やすさを保ちたければ

html
1    <input class="departuredate" stype="text" name="" value="" placeholder="出発日"><!--
2    --><input class="returndate" type="text" name="" value="" placeholder="出発日">
3```の様に改行・空白をコメントアウトして改行や空白を無いものとして扱うしかないんじゃないでしょうか。

投稿2019/02/09 00:46

ukkari-ukachan

総合スコア50

CSS
1.container {
2  width: 960px;
3  margin: 0 auto;
4  padding: 40px 0;
5  font-size: 0;
6}

.containerにfont-size: 0;を追加すると、自分の環境では隙間がなくなります。

投稿2019/02/08 19:30

teritama

総合スコア126

think49

2019/02/09 05:46

個人的には、文字を消す行為は推奨しません。通常の文字も全て消えてしまうのに加えて、スパム判定される可能性があります。

teritama

2019/02/09 07:03

.container内の input と .btn でフォントサイズ指定してあるので問題ないと思いましたが、スパム判定は怖いですね。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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

inputの隙間をなくすには

関連した質問