Question about form layout

[David Sevilla]

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

 

[Jonathan N. Little]

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?

<p>s by default have margins (the extra space you see) and <div>s don't.

form p { margin: 0; padding: 0; }

will get what your wish...

 

[David Sevilla]

Hi,

<p>s by default have margins (the extra space you see) and <div>s don't.

Well, as I said I have tried both and they look the same...

form p { margin: 0; padding: 0; }

will get what your wish...

It didn't, the space between the form and the previous line is still
bigger than the previous one, even with style="margin: 0; padding: 0;"
added to the "p" inside the form...

Thanks,

David

 

[Ben C]

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.

 

[John L.]

Hi,



Well, as I said I have tried both and they look the same...


It didn't, the space between the form and the previous line is still
bigger than the previous one, even with style="margin: 0; padding: 0;"
added to the "p" inside the form...

Add margin-bottom: 0; to the <p> 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.

 

[Bergamot]

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.

 

[David Sevilla]

Hi,

Add margin-bottom: 0; to the <p> 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

 

[David Sevilla]

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

 

[Ben C]

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