Question about form layout

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?

Thanks,

David

Re: Question about form layout

David Sevilla 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?

s by default have margins (the extra space you see) and

Re: Question about form layout

Hi,

On Oct 18, 3:03 pm, "Jonathan N. Little"
wrote:

> > 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?
>
>

s by default have margins (the extra space you see) and

Re: Question about form layout

On 2007-10-18, David Sevilla 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 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 .

Alternatively, make it "display: block; margin: 0 auto" and remove the

. That makes the a block-level element (so no baseline to
worry about) horizontally centered in its container.

Re: Question about form layout

David Sevilla wrote:
> Hi,
>
> On Oct 18, 3:03 pm, "Jonathan N. Little"
> wrote:
>
>>> 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?
>>

s by default have margins (the extra space you see) and

Re: Question about form layout

John L. wrote:
>
> As far as I know, forms don't have margins by detault in FF

Yes, they do. Same defaults as paragraphs, though margin collapsing
rules apply.

--
Berg

Re: Question about form layout

Hi,

> Add margin-bottom: 0; to the

immediately above the form, and either
> use a div inside the form or add margin: 0; to the p inside the form.
>
> As far as I know, forms don't have margins by detault in FF although you
> might want to include
>
> form {
> margin: 0;
> padding: 0;
>
> }
>
> for IE's benefit.

Well, I see clearly now that the extra space is nothing more that the
usual space between paragraphs. Even if I change the inside "p" into a
"div", it just doesn't work because the "p" before the form is
considered closed as soon as the "form" tag appears (this I deduce
from testing with the W3 validator).

So, I guess there are two different paragraphs here, and the solution
is to use CSS as suggested.

Thanks,

David

Re: Question about form layout

On Oct 18, 4:33 pm, David Sevilla wrote:

> So, I guess there are two different paragraphs here, and the solution
> is to use CSS as suggested.

.... or, more simply, to put everything inside the form so there's only
one paragraph :)

David

Re: Question about form layout

On 2007-10-18, Bergamot wrote:
> John L. wrote:
>>
>> As far as I know, forms don't have margins by detault in FF
>
> Yes, they do. Same defaults as paragraphs, though margin collapsing
> rules apply.

In FF form has a margin-bottom of 1em in quirks mode, but none in
strict. No margin-top.

P on the other hand has both top and bottom margins that may be a tiny
bit bigger than 1em. Now where did I put that screen-ruler...