Inconsistency in form field spacing

[Everton]

Hello

This has a codePen ref of:

http://codepen.io/Everton/pen/yyQPGP

Why is there an inconsistency in spacing between the form fields, please?

The form can be seen here:

http://www.bayingwolf.com/Formdiscrepancies.jpg

and the relevant page here:

http://www.bayingwolf.com/contact.asp

Thank you.

[Shikkediel]

There is no style defined so the fields will just be a as big as they ‘feel’ they need to be (seems to be solved on the page though) :

.input, .contact {
width: 300px /* or anything else you like */
}

[Paulie_D]

I think he meant the vertical spacing which does appear inconsistent.

I’d tend to avoid using p tags to wrap form elements (as it is on the live page), I’d prefer to use divs myself but I do know that using p tags is acceptable.

[Shikkediel]

I see, an odd one indeed. A clue to it being related to the <p> tags is visible when experimentally they are set to be displayed inline. The nested elements stay in place but the tag from the control question ends up at the bottom of the textarea. Must be a line break pixel of sorts then?

Edit – not sure the last bit makes sense. I’m obviously quite clueless here.

[Author]

Posts