Vertical alignment of strange behavior of Chrome

I noticed weird behavior with Chrome . Applying the vertical alignment property to a div, the node text inside it also aligns.

With Firefox, node text ignores the property as it should.

Is this a Chrome bug? Living example

<div>
  <input>
   text
</div>

div{
    vertical-align:top;
    font-size: 11px;
}
+5
source share
1 answer

This is similar to the expected application behavior of vertical-align: top to the div. If you need a simple fix, just apply the line height to the div, which is the height of the input field. This will vertically center the text to the right of the input.

div {
  vertical-align: top;
  font-size: 11px;
  line-height: 16px;
}
0
source

All Articles