fstanis fstanis - 3 months ago 11
CSS Question

Empty element positions itself differently from one with content?

I'm trying to have a fixed-size

<button>
next to an input. I tried the following:

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


CSS:

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:

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


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
&nbsp;
or a
:before
to the button)?

Answer

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.

Comments