Почему вертикальное положение этих элементов так сильно меняется?

Question

Такие вещи заставляют меня чувствовать себя такой нуб.

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

я не имею никакого обоснования в моей голове, почему элементы расположены вертикально, как они есть. да, css немного дряблый, в том, как так много вещей назначается одинаковой высоты и позиции. но результаты причудливы. особенно 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

Попробуйте frist сделать некоторый сброс CSS (каждый браузер имеет свои собственные собственные правила для элементов), тогда вам нужно установить вертикальное выравнивание.

вы можете сделать что-то вроде этого

*{margin:0; padding: 0} 

Это не самый лучший способ сбросить стили, но он работает Узнайте больше о CSS сброса

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

Установите этот флажок codepen