fstanis fstanis - 1 year ago 60
CSS Question

Empty element positions itself differently from one with content?

I'm trying to have a fixed-size

next to an input. I tried the following:

<input type="text">
<button type="submit">S</button>


input {
height: 38px;
width: 50%;
button {
height: 38px;
width: 38px;

This works fine, but when I removed the inner HTML from the button, the button moved itself up by 13px:

<input type="text">
<button type="submit"></button>

Button moved

Fiddle here

I'm really curious at this point what's causing this behaviour and is there anything I can do prevent it (other than adding e.g. a
or a
to the button)?

Answer Source

The elements are aligned by its baselines by default. In your first example, there is no text, so the baseline of the element is determined by the element itself as a box, meaning the browser "sees" the baseline as the bottom of the element.

Take a look at vertical-align's possible values and see what best suits your needs. middle, top and bottom will all work here since your button is the same size as the input, but choose based on your future plans.