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

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;
}

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

Answer 2

尝试复制CSS（每个浏览器都有自己的元素原生规则），然后你需要设置垂直对齐。

你可以做这样的事情

*{margin:0; padding: 0}

这不是重置样式的最佳方法，但它有效 了解有关CSS RESET的更多信息

http://www.cssreset.com/which-css-reset-should-i-use/

选中此codepen