Recipe 7.1. Modifying the Spacing Around a Form

Problem

You want to modify the space around a form.

Solution

Set the margin to zero while adjusting the padding values of the form element (see Figure 7-1):

form {  margin: 0;  padding: 1em 0;   border: 1px dotted red; /* set  in order to see padding effect */ } 

Figure 7-1. Padding is applied under the form's border

Discussion

When positioning forms into a web page design, developers find that they will need to modify the space between the form and other page elements in the design. Typically, the most common modification is to adjust the padding at the top and bottom of the form.

See Also

Recipe 7.2 for styling input elements.