CODEWITHSUNDEEP
htmlcsscss-floatvertical-alignment
mqklin
mqklin

Reputation: 2048

css default vertical-align with inline-block

Here is the code.

I have typical form with label, input and helper:

enter image description here

The code:

html:

<div class="container">
  <span class="label">Label:</span>
  <div class="el">
    <input>
    <span>helper helper helper</span>
  </div>
</div>

css:

.container {
  outline: 1px solid black;
  width: 200px;
  height: 100px;
}
.label{
  display: inline-block;
  width: 30%;
}
.el{
  display: inline-block;
  width: 60%;
}
input{
 width: 50%;
}

The problem is that Label: aligned opposite second row. I know how to fix that: i can use float: left; or vertical-align: top; in the .label class, but i want to know, why is that happening? Why Label: jump to second row?

p.s. Sorry for my english.

Upvotes: 0

Views: 704

Answers (3)

Ivin Raj
Ivin Raj

Reputation: 3429

Please try this one;

 .inner {
  display: inline-block;
  vertical-align: middle;
  background: yellow;
  padding: 3px 5px;
}

DEMO

Upvotes: 0

Amit singh
Amit singh

Reputation: 2036

I think due to the display:inline-block defined is creating this situation..

Better use display:inline This will solve your problem...

And here is the code

CSS

.container {
  outline: 1px solid black;
  width: 250px;
  height: 100px;
}
.label{
  display: inline;
  width: 50%;
}
.el{
  display: inline;
  width: 60%;
}
input{
 width: 50%;
}

HTML

<div class="container">
      <span class="label">Label:</span>
      <div class="el">
        <input />
        <span>helper helper helper</span>
      </div>
    </div>

Upvotes: -1

Matt Maclennan
Matt Maclennan

Reputation: 1304

This is because the default value for vertical-align is baseline, which...

Aligns the baseline of the element with the baseline of its parent

For reference, here is the article on Mozilla Developer Network

Upvotes: 2

Related Questions