\r\n \r\n \r\n\r\n\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n

\r\n

\r\n \r\n \r\n

\r\n

検索する\r\n

\r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n```\r\n\r\n```CSS\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n /*全要素のマージン・パディングをリセット*/\r\n}\r\n\r\nh1, h2, h3, h4, h4, h6, p {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nbody {\r\n font-family: Verdana, sans-serif;\r\n margin: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.container {\r\n width: 960px;\r\n margin: 0 auto;\r\n padding: 40px 0;\r\n}\r\n\r\nheader {\r\n height: 65px;\r\n}\r\n\r\n/*main*/\r\nmain {\r\n color: #fff;\r\n background: url(../imgs/bg.png);\r\n background-size: cover;\r\n}\r\n\r\ninput {\r\n border-radius: 2px;\r\n width: 300px;\r\n height: 40px;\r\n font-size: 20px;\r\n}\r\n\r\n.btn {\r\n background-color: #1e90ff;\r\n color: #ffffff;\r\n padding: 10px 15px;\r\n font-size: 20px;\r\n margin-left: 15px;\r\n cursor: pointer;\r\n}\r\n\r\n.lookup:not(:last-child) {\r\n margin-bottom: 40px;\r\n}\r\n\r\n.lookup:not(:last-child) {\r\n margin-bottom: 40px;\r\n}\r\n\r\n```\r\n\r\n![イメージ説明](69e7524078e7b996d44462a6dac3adbc.png)","answerCount":3,"upvoteCount":1,"datePublished":"2019-02-08T17:23:44.304Z","dateModified":"2019-02-08T17:23:44.304Z","acceptedAnswer":{"@type":"Answer","text":"ブラウザ依存の暗黙の空白が出来ちゃうやつじゃないですかね。\r\n改行やインデントなども特殊文字なので改行分の空白が出来てしまう現象だと思います。\r\n対策としてはkei344さんのおっしゃる通り改行や空白をなくすか、どうしても改行して見やすさを保ちたければ\r\n\r\n```html\r\n \r\n```の様に改行・空白をコメントアウトして改行や空白を無いものとして扱うしかないんじゃないでしょうか。","dateModified":"2019-02-09T00:46:38.445Z","datePublished":"2019-02-09T00:46:38.445Z","upvoteCount":1,"url":"https://teratail.com/questions/173467#reply-258296"},"suggestedAnswer":[{"@type":"Answer","text":"```CSS\r\n.container {\r\n width: 960px;\r\n margin: 0 auto;\r\n padding: 40px 0;\r\n font-size: 0;\r\n}\r\n```\r\n\r\n```.container```に```font-size: 0;```を追加すると、自分の環境では隙間がなくなります。\r\n![出発日と帰国日の隙間なし](ce7788876965e4d3d0364d72db99dfbe.jpeg)","dateModified":"2019-02-08T19:30:43.147Z","datePublished":"2019-02-08T19:30:43.147Z","upvoteCount":0,"url":"https://teratail.com/questions/173467#reply-258282","comment":[{"@type":"Comment","text":"個人的には、文字を消す行為は推奨しません。\r\n通常の文字も全て消えてしまうのに加えて、スパム判定される可能性があります。","datePublished":"2019-02-09T05:46:32.736Z","dateModified":"2019-02-09T05:46:32.736Z"},{"@type":"Comment","text":".container内の input と .btn でフォントサイズ指定してあるので問題ないと思いましたが、スパム判定は怖いですね。","datePublished":"2019-02-09T07:03:23.808Z","dateModified":"2019-02-09T07:03:23.808Z"}]},{"@type":"Answer","text":"改行をなくす。\r\n```HTML\r\n\r\n```","dateModified":"2019-02-08T17:37:31.703Z","datePublished":"2019-02-08T17:37:31.703Z","upvoteCount":3,"url":"https://teratail.com/questions/173467#reply-258278","comment":[{"@type":"Comment","text":"ありがとうございます。Pをとうるのでしょうか。結果は同じでした。","datePublished":"2019-02-08T18:00:30.988Z","dateModified":"2019-02-08T18:00:30.988Z"},{"@type":"Comment","text":"Pは関係ないです。input要素間の改行と空白を全て削除してください。","datePublished":"2019-02-08T18:11:43.505Z","dateModified":"2019-02-08T18:11:43.505Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/HTML","name":"HTMLに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/173467","name":"inputの隙間をなくすには"}}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップHTMLに関する質問inputの隙間をなくすには

Q&A

解決済

3回答

17495閲覧

inputの隙間をなくすには

Chandler_Bing
Chandler_Bing

総合スコア673

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2019/02/08 17:23

1

1

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

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

イメージ説明

oppekeが👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3件

0

改行をなくす。

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

投稿2019/02/08 17:37

kei344
kei344

総合スコア69643

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Chandler_Bing
Chandler_Bing

2019/02/08 18:00

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

2019/02/08 18:11

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

0

ベストアンサー

ブラウザ依存の暗黙の空白が出来ちゃうやつじゃないですかね。
改行やインデントなども特殊文字なので改行分の空白が出来てしまう現象だと思います。
対策としては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
ukkari-ukachan

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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
teritama

総合スコア126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49
think49

2019/02/09 05:46

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

2019/02/09 07:03

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップHTMLに関する質問

inputの隙間をなくすには