Git Rid Of Annoying Line Breaks From Form Tags

If you are very particular about your page layouts, the last thing you need are HTML elements like the <form> tag conspiring against you by adding arbitrary line breaks for no apparently reason (at least it seem arbitrary to me — if anyone knows why the world the form tag behave like this, let me know). The old way to solve the problem was by putting your form tags between table rows or outside of table cells. It doesn’t make for particularly well-formed or pretty HTML, but it made the problem go away. But what do you do if you are using cascading style sheet positioning, so you don’t have any table tags to sweet extra line breaks under? All you have to do is drop the following line in your stylesheet, and you will never have to worry about it again:

form {margin: 0px 0px 0px 0px; }

Of course, you can also use this technique to add wanted and controlled spacing to your form, as well. The areas that the numbers represent are, in order, top, right, bottom and left.

15 Responses to Git Rid Of Annoying Line Breaks From Form Tags

  1. GriLLo says:

    Damn! it was that easy …do you know if this works in all browsers ?

  2. Christian Cantrell says:

    I tested it on all browsers that I have handy, which are Mac IE, Safari, Mac Mozilla 1.2.1, Win IE 6.0 and Win Netscape 7.0. That’s a pretty comprehensive list, and it works perfectly on them all.

  3. dave spencer says:

    Thanks, man. I didn’t know the old way. I think I can stop screaming now.

  4. JB says:

    Nice one, – this has been bothering me for ages. works a treat.

  5. Marc Wallace says:

    I actually go one further:form { margin: 0px; padding: 0px; }This had the best results for me in getting IE and NS4 to look similar… and there’s no reason not to add in the padding, just in case..

  6. florian fischer says:

    I normally use<span style=”display:none”><form method=”get” … ></span>…<span style=”display:none”></form></span>It even removes the implicit <br>.I suspect it is IE stuff though.

  7. Alex says:

    Court obviously didn’t take his medicine today. In any case, thanks for a great tip! It was right in front of my face all along…

  8. Phil Truesdale says:

    You don’t need a unit of measure when you’re declaring 0 (zero) as the value. { margin: 0; padding: 0;} It doesn’t hurt, but it’s not needed.

  9. Louis says:

    Christian Cantell: I love you.I just spend about an hour messing with the css file wondering why there was some blank space there. Finally I realize that it was the form tag in the html that was causing a line break!! (only in IE, not in mozilla or firefox)Does somebody in the world knows why the hell a form tag cames with a as a gift when you render it under IE?????Your code just fixed the damm thing, and now it works like a charm.sorry about the language, Im just so mad about the issue, I wasted an hour on it.Thanks a lot!!

  10. Dave says:

    As I read the simple line of code, my screen went white, and bright aura was cast from my monitor. It filled the room and angels descended surrounding me with hope!I said aloud, “My Lord, make that man a Guinness”. But, then, my Microsoft autoText changed it to genius before I could recall my message.So, I guess you’ll have to live with that…Thanks! Such a simple solution to a head-banging “bug”.-Dave

  11. thanks.. simple solution. it’s been giving me grief for quite some time now 🙂

  12. ok.. it cleared up most of the extra whitespace, but still left one break in there…solved it by putting this in my stylesheet…form {margin: 0px; padding: 0px; display: inline;}.. alternatively, you could do the following..<form style=”display: inline”><input type….></form>regards,Sohail.

  13. Rach says:

    Late to the party – but I thought you’d like to know, you’re still rescuing the sanity of coders six years on! Thank you!

  14. Jeremy says:

    Alas – this no longer works. IE9 now gives the line break again, even using Sohail’s:
    form {margin: 0px; padding: 0px; display: inline;
    That worked in IE7 but not the new one. Any ideas??? Anyone??

    [PS. IE: it isn’t a standard if you’re the only one doing it]

  15. Jeremy says:

    (More detail: this works in IE9 as long as form tags are not cross-nested. The following USED to break smoothly, but does not in IE9, But it is bad practice so shame on anyone [me] who had it:

    content
    content 2