0

I'm having issues with this: https://jsfiddle.net/xfpfjqw0/

header .logo {
  display: inline-block;
  height: 150px;
  width: 40%;
}
header .search {
  display: inline-block;
  height: 150px;
  width: 40%;
}
<header>
  <div class="logo"></div>
  <div class="search">
    <form action="/search/" method="get">
      <input type="text" name="q">
      <input type="submit" value="Search" class="btn">
    </form>
  </div>
</header>

It's an excerpt from a website I'm building. If you inspect the two elements you will see that the first one starts at the top-left but the second one on the down-right of the first one.

Why is that happening?

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
Vedran
  • 1,113
  • 1
  • 17
  • 36

1 Answers1

0

It's because you have to specify the vertical-align of the element to change the alignment. The default value is baseline but you can change it like for example top, middle, bottom

Like this

See a larger explanation of this right here : Why is this inline-block element pushed downward?

Community
  • 1
  • 1
Vincent G
  • 8,547
  • 1
  • 18
  • 36
  • The default of `vertical-align` is `baseline`, so actually the boxes already have a `vertical-align`, and adding `vertical-align: baseline` doesn't solve the issue. So why do you have to specify another value than `baseline`? There is a specific reason which you failed to mention, but fortunately the answer of the duplicate question *does* provide all the information, context and literature. – GolezTrol Apr 04 '16 at 15:18
  • True, it was unclear in my answer. But I've specified the default value is `baseline`. You can specify it to change its default value, that's what I've wanted to meant. – Vincent G Apr 04 '16 at 15:21