两个具有不对齐的内嵌块样式的div

I have two div tags and only one has input tag; why output is in this way?

我有两个div标签只有一个有输入标签;为什么输出是这样的?

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
}

<div class="logo">
  <input type="text">
</div>

<div class="form">
</div>

Output:

Can anyone explain this? Here is the fiddle: https://jsfiddle.net/ag487L5m/

谁能解释这个?这里是小提琴:https://jsfiddle.net/ag487L5m/。

2 个解决方案

#1

By default, inline and inline-block elements are set to vertical-align: baseline.

默认情况下，内联和内联块元素被设置为垂直对齐:基线。

Since your div.logo has a text input, div.form which is now an inline-block element, aligns itself on the baseline of the input.

由于div.logo有一个文本输入div.form(现在是一个内嵌块元素)，它将自己对齐到输入的基线上。

Adding vertical-align: top to the CSS should fix it. As in:

添加垂直对齐:顶部的CSS应该修复它。如:

div.logo, div.form { 
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px dotted;
    vertical-align: top;
}

div.logo, div.form { 
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px dotted;
    vertical-align:top;
}

<div class="logo">
  <input type="text">
</div>

<div class="form">

</div>

#2

That's because the vertical alignment of inline elements defaults to baseline. Change it to top:

这是因为内联元素的垂直对齐默认为基线。将其更改为:

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
  vertical-align:top;
}

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
  vertical-align:top;
}

<div class="logo">
  <input type="text">
</div>

<div class="form">

</div>