CODEWITHSUNDEEP
htmlcss
Vinay Aggarwal
Vinay Aggarwal

Reputation: 1585

Two divs with inline-block style not aligned

I have two div tags and only one has input tag; why output is in this way?

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
}
<div class="logo">
  <input type="text">
</div>

<div class="form">
</div>

Output:

enter image description here

Can anyone explain this? Here is the fiddle: https://jsfiddle.net/ag487L5m/

Upvotes: 7

Views: 2599

Answers (2)

Tejasvi Karne
Tejasvi Karne

Reputation: 648

By default, inline and inline-block elements are set to vertical-align: baseline.

Since your div.logo has a text input, div.form which is now an inline-block element, aligns itself on the baseline of the input.

Adding vertical-align: top to the CSS should fix it. As in:

div.logo, div.form { 
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px dotted;
    vertical-align: top;
}


div.logo, div.form { 
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px dotted;
    vertical-align:top;
}
<div class="logo">
  <input type="text">
</div>

<div class="form">

</div>

Upvotes: 8

j08691
j08691

Reputation: 207861

That's because the vertical alignment of inline elements defaults to baseline. Change it to top:

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
  vertical-align:top;
}


div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
  vertical-align:top;
}
<div class="logo">
  <input type="text">
</div>

<div class="form">

</div>

Upvotes: 6

Related Questions