input要素をdiv要素のなかに入れると思わぬ挙動をする

width: 50%;でheightは適当でdisplay: inline-block;にした二つの兄弟divをまず表示します。
適当に色をつけると

こんな感じになります。
ここで右のdivの子要素でinputのtype="textをおくと突然、

こんな風に親要素がずれます。
margin等はかけていません。
わかるかたいらっしゃいますか？

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/reset.css">
6  <link rel="stylesheet" href="css/stylesheet.css">
7  <script src="main.js"></script>
8</head>
9<body>
10  <div class="a"></div>
11  <div class="b">
12    <input type="text" class="c">
13  </div>
14</body>
15</html>

css
1*,*::before,*::after{
2  box-sizing: border-box;
3}
4
5body{
6  font-size: 0;
7}
8
9body *{
10  font-size: initial;
11}
12
13.a, .b{
14  width: 50%;
15  height: 200px;
16  display: inline-block;
17}
18
19.a{
20  background-color: beige;
21}
22
23.b{
24  background-color: burlywood;
25}

reset
1/* http://meyerweb.com/eric/tools/css/reset/
2   v2.0 | 20110126
3   License: none (public domain)
4*/
5
6html, body, div, span, applet, object, iframe,
7h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8a, abbr, acronym, address, big, cite, code,
9del, dfn, em, img, ins, kbd, q, s, samp,
10small, strike, strong, sub, sup, tt, var,
11b, u, i, center,
12dl, dt, dd, ol, ul, li,
13fieldset, form, label, legend,
14table, caption, tbody, tfoot, thead, tr, th, td,
15article, aside, canvas, details, embed,
16figure, figcaption, footer, header, hgroup,
17menu, nav, output, ruby, section, summary,
18time, mark, audio, video {
19	margin: 0;
20	padding: 0;
21	border: 0;
22	font-size: 100%;
23	font: inherit;
24	vertical-align: baseline;
25}
26/* HTML5 display-role reset for older browsers */
27article, aside, details, figcaption, figure,
28footer, header, hgroup, menu, nav, section {
29	display: block;
30}
31body {
32	line-height: 1;
33}
34ol, ul {
35	list-style: none;
36}
37blockquote, q {
38	quotes: none;
39}
40blockquote:before, blockquote:after,
41q:before, q:after {
42	content: '';
43	content: none;
44}
45table {
46	border-collapse: collapse;
47	border-spacing: 0;
48}

ちなみにclass cがdivだったらこんなことにはなりません。

kei344

2020/02/12 11:49

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

annaPanda

2020/02/12 11:57

ご指摘ありがとうございました。

miyabi_pudding

2020/02/12 12:06

main.jsで、何かDOMやCSSをコントロールしてるとかありませんか？？もし可能であれば、main.jsの内容も記載した方がいいかと。

annaPanda

2020/02/12 12:16

今、main.jsを削除して ``` <script src="main.js"></script> ``` も外して見ましたが、同じです。 main.jsはこれから書こうとしていた機能を持たないものでした。。

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

回答2件

.a,.bを適当にラップしてflexで処理してください

投稿2020/02/12 11:44

yambejp

総合スコア115010

annaPanda

2020/02/12 12:06

回答ありがとうございます。おっしゃるやり方でできました。 inline-blockをやめてfloatするなどでもできるようですが、どちらかというと"なぜか"を知りたいのですが、わかりますか？

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

ベストアンサー

baselineに沿って並んでいるからです。

HTML
1  <div class="a"></div>
2  <div class="b">
3    <input type="text" class="c">
4  </div>
5  
6  
7  <div class="a"></div>
8  <div class="b">あああ
9  </div>
10  
11  
12  <div class="a"></div>
13  <div class="b">あああ<br>ああ<br>あ
14  </div>
15  
16  
17  <div class="a">あああ</div>
18  <div class="b">
19  </div>
20  
21  
22  <div class="a"></div>
23  <div class="b">
24  </div>
25
26```**動くサンプル：**[https://jsfiddle.net/uvjnLh01/](https://jsfiddle.net/uvjnLh01/)
27
28---
29
30
31【vertical-alignの使い方と別の実装方法について - Cluex Developersブログ】
32[http://cluex-developers.hateblo.jp/entry/2016/09/09/211032](http://cluex-developers.hateblo.jp/entry/2016/09/09/211032)