3

I don't understand why these won't align. This should be so simple. I know I could adjust the button with a negative margin, but that feels a bit hacky. I want to know what is causing this issue.

HTML:

<h2>A simple thing<br/>made difficult!</h2> 
<button>BTN</button>

CSS:

h2 {
    font-size: 29px;
    font-weight: lighter;
    display: inline-block;
    font-family:'Open Sans', sans-serif;
    margin:0;
    margin-right: 42px;
}
button {
    margin:0;
    font-size: 35px;
    padding: 10px 40px;
    width: 200px;
    display: inline-block;
}

JS fiddle here: http://jsfiddle.net/15xn79by/

MP_Webby
  • 916
  • 1
  • 11
  • 35
  • possible duplicate of [Why is this inline-block element pushed downward?](http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward) –  Aug 08 '15 at 11:31

2 Answers2

4

just use vertical-align:top; for button

h2 {
    font-size: 29px;
    font-weight: lighter;
    display: inline-block;
    font-family:'Open Sans', sans-serif;
    margin:0;
    margin-right: 42px;
}
button {
    margin:0;
    font-size: 35px;
    padding: 10px 40px;
    width: 200px;
    display: inline-block;
    vertical-align:top;
}
<h2>A simple thing<br/>made difficult!</h2> 
<button>BTN</button>
Nabi
  • 764
  • 1
  • 10
  • 22
  • 2
    Good solution, thanks. But why does this work? I always thought `vertical-align` was for elements with `display` set to `table-cell`. Why do I even need it? I can align two buttons beside each other fine, and two h2 tags. So weird. – MP_Webby Aug 08 '15 at 11:20
0
h2 {
font-size: 29px;
font-weight: lighter;
display: inline-block;
font-family:'Open Sans', sans-serif;
margin:0;
}
button {
margin-left:10;
font-size: 35px;
padding: 10px 40px;
width: 200px;
display: inline-block;
float:right;
}
<h2>A simple thing<button>BTN</button><br/>made difficult!</h2>