为什么这些元素的垂直位置变化如此之大？

Question

这样的事情让我感觉像是一个菜鸟.

http://codepen.io/eighteyes/pen/cgLIu

我脑子里没有任何理由可以解释为什么元素垂直放置的方式.是的,css有点janky,在如此多的东西被赋予相同的高度和位置.但结果很奇怪.特别是textNodes ...

HTML

wtf is up
<p>a</p>

<br>

this is low
<p></p>

  <br>
<br>

<div>
  <p>s</p>
  <span>Down Here</span>
  <button>^</button>
  <button></button>
  <button>_</button>
  <input type="text" placeholder="Why is this normal?"/>
      <button class="submit">And This</button>
</div>

CSS

div, button, input, span, p {height: 50px; border:1px solid #999;}
button, input, span, p { display:inline-block; }
span {background-color: red }
p {background-color: blue; height:60px}

我确定它与浏览器基本样式有关,我只是不知道如何覆盖/控制它,是问题所在.我希望一切都像我的div中的空按钮一样no questions asked.

有人有主意吗？

Answer 1

对于你的内联块，你应该真正声明一些东西的垂直对齐。

button, input, span, p { 
    display:inline-block; 
    vertical-align: top;
}

否则，所有这些都使用略有不同的对齐设置。