Removing space and padding from FORM tag

This tip concerns removing the extra padding or space before and after the <FORM> tag. Let us suppose that you have to constrain two text fields and a submit button/image in a limited vertical space. In order to layout the form fields and the button/image, you would place them in table cells (as we do with most other HTML elements). However, you will notice that there is extra space (vertical space) or padding before <FORM> occurs and after the end of the tag.

Now for an example. Below is issue which we are taking about.

Do you notice the extra space after the login button? Good. Now, let us see how we can remove this space. First check the incorrect code. The code for the above form is:

<TABLE WIDTH="200" CELLPADDING="1" CELLSPACING="0" BORDER="0"
BGCOLOR="#878787">
<TR>
<TD>
<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
BGCOLOR="#EEEEEE">
   <TR>
   <TD BACKGROUND="greygrad.gif"><B>Member login</B></TD>
   </TR>
   <TR>
   <TD>
   <FORM NAME="spaceform">
   <TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
      <TR>
      <TD ALIGN="RIGHT">Username:</TD>
      <TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
      </TR>
      <TR>
      <TD ALIGN="RIGHT">Password:</TD>
      <TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
      </TR>
      <TR>
      <TD> </TD>
      <TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
      </TR>
   </TABLE>
   </FORM>
   </TD>
   </TR>
</TABLE>
</TD>
</TR>
</TABLE>

Notice the <FORM> tag surrounds the table in which the form fields occur.
In order to remove the extra space/padding, we take the help of Style Sheets. Now CSS (Cascading Style Sheets), allow us to set the margins and padding properties around HTML elements and we employ these two properties to remove the extra space and padding around the <FORM> element. Our code thus becomes:

<TABLE WIDTH="200" CELLPADDING="1" CELLSPACING="0" BORDER="0"
BGCOLOR="#878787">
<TR>
<TD>
<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
BGCOLOR="#EEEEEE">
   <TR>
   <TD BACKGROUND="greygrad.gif"><B>Member login</B></TD>
   </TR>
   <TR>
   <TD>
   <FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
   <TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
      <TR>
      <TD ALIGN="RIGHT">Username:</TD>
      <TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
      </TR>
      <TR>
      <TD ALIGN="RIGHT">Password:</TD>
      <TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
      </TR>
      <TR>
      <TD> </TD>
      <TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
      </TR>
   </TABLE>
   </FORM>
   </TD>
   </TR>
</TABLE>
</TD>
</TR>
</TABLE>

With CSS we specify the margin and padding style sheet properties to have a value of zero (0) pixels (px). This results in the removal of any extra space around the HTML form. The result is below:

Don't go away yet - there is more.
The purpose of the first TABLE (the one that encloses the FORM and the second table) is ONLY to create a thin grey colored border. Most web developers and designers used this technique because it was cross-browser compatible. However, with the important browsers (Internet Explorer, Mozilla, Netscape, Opera...) now supporting style sheets and (imp) with the same results, we can again employ style sheets to create a 1 pixel thin border and do away with our outermost TABLE. Check the code below:

<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
STYLE="background-color: #EEEEEE; border: 1px solid #878787">
   <TR>
   <TD STYLE="background-image: url('greygrad.gif');"><B>
   Member login</B></TD>
   </TR>
   <TR>
   <TD>
   <FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
   <TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
      <TR>
      <TD ALIGN="RIGHT">Username:</TD>
      <TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
      </TR>
      <TR>
      <TD ALIGN="RIGHT">Password:</TD>
      <TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
      </TR>
      <TR>
      <TD> </TD>
      <TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
      </TR>
   </TABLE>
   </FORM>
   </TD>
   </TR>
</TABLE>

The code in blue reflects three cascading style sheets properties that I have introduced. These Style Sheet properties are placed inside the STYLE attribute of an HTML element (the <TABLE> and <TD> elements in our case). You will notice that each of the three properties (background-color, border and background-image) is given certain values. Before I detail each of the style sheets properties and their values, let us first check up how our form looks with this new code:

Style sheets can be included in an HTML document in three ways - External Styles, Embedded Styles and Inline Styles. We don't have to go into those "gory" details for now, but just for your information, we are including styles sheets in our document as Inline Styles - Styles placed inline with the HTML code.

The Style sheets background-color property

The property simply specifies the background color of the HTML element. I am a fan of Hexadecimal color codes, so I have used the hexadecimal code for light grey - #EEEEEE. Note, the value of the style sheet property is separated from its name with a color - :

The Style sheets background-image property

This property specifies the background image to be used for that HTML element. The image is refered by its URL which can be a absolute or a relative URL. I have used a relative URL here.

The Style sheets border property

The way I have used this style sheet property is more complex that the above two. Here I have specified 3 values to it - 1px, solid and #878787. Note, there are no commas separating the three values. So what I have essentially done is to direct the element to have a 1px (one pixel) thin #878787 colored solid border. Taking a step further in our understanding, let us create the same table with a 2 pixel thick, orange (#FF9900) colored border with dashes.

<TABLE WIDTH="198" CELLPADDING="3" CELLSPACING="0" BORDER="0"
STYLE="background-color: #EEEEEE; border: 2px dashed #FF9900">
   <TR>
   <TD STYLE="background-image: url('greygrad.gif');"><B>
   Member login</B></TD>
   </TR>
   <TR>
   <TD>
   <FORM NAME="spaceform" STYLE="margin: 0px; padding: 0px;>
   <TABLE WIDTH="192" CELLPADDING="2" CELLSPACING="0" BORDER="0">
      <TR>
      <TD ALIGN="RIGHT">Username:</TD>
      <TD><INPUT TYPE="TEXT" NAME="texte1" ...></TD>
      </TR>
      <TR>
      <TD ALIGN="RIGHT">Password:</TD>
      <TD><INPUT TYPE="PASSWORD" NAME="texte2" ...></TD>
      </TR>
      <TR>
      <TD> </TD>
      <TD><INPUT TYPE="SUBMIT" VALUE="Login" ...>/TD>
      </TR>
   </TABLE>
   </FORM>
   </TD>
   </TR>
</TABLE>

That was a glimpse of what style sheets can do to your HTML document. Not only can they help you in creating those visuals which we either not possible with HTML or just too painful and complicated to implement, but they also help in segregating design and content which is what all web developers should strive for. Style sheets are the future so eventhough you might feel that their implementation is not the same across different browsers, it is a good idea to get a grasp their essence quickly.