Why does the vertical position of these elements change so much?

Question

It's things like this that make me feel like such a noob.

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

i don't have any rationale in my head for why the elements are positioned vertically the way they are. yes the css is a little janky, in how so many things are assigned the same height and position. but the results are bizarre. especially the 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}

i'm sure it has something to do with the browser base styles, i just don't know how to override / control it, is the problem. i want everything to behave like the empty button, in my div, no questions asked.

anyone have any ideas?

Answer 1

With your inline-block you should really declare a vertical-align of something.

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

Otherwise all those use slightly different alignment settings.