Posted by Ben C on 10/18/07 13:51

On 2007-10-18, David Sevilla <sevillad@gmail.com> wrote:
> Hi,
>
> I've put a form in my webpage: http://www.davidsevilla.com/personal-sp.html
> and I don't understand why I get some small extra space between the
> form and the previous line (in Firefox, in any case it's HTML Strict).
> It's the same if I change the "p" inside into a "div". I've tried to
> understand a bit how block elements work and so on, but this is too
> much for me :) Any explanations?

The gap is because the <img> is an inline element and so sits on the
baseline by default, as if it were a piece of text.

You can move it to the bottom of the line box by setting vertical-align:
bottom on the <img>.

Alternatively, make it "display: block; margin: 0 auto" and remove the
<br>. That makes the <img> a block-level element (so no baseline to
worry about) horizontally centered in its container.

[Back to original message]