Problem solving a large blank space before and after a form element

Solve | The problem

Why is there a large blank space around the form element?

Solution Idea:

Because the table cell form is the default outer filler margin property is not 0 block elements, so there are two ways to solve the problem, define the block element as inline element, or set the CSS object's margin property to 0.

Specific steps:

Method One: Set the margin property of the CSS object to 0:

<div style= "border:1px solid #000" > First line <form style= "margin:0px" ></form> second line </div>

Method Two: Set the block element to the inline element:

<div style= "border:1px solid #000" > First line <form style= "Display:inline" ></form> first line </div>

Although there is also a <form> tag with <tr> or <td> nested writing, but not recommended:

<table><form><tr><td> Cell </td></tr></form></table>

Or

<table><tr><form><td> Cell </td></form></tr></table>

Note: The first method does not have the same text before and after the form, and the second method walks.

Tip: If you want to change the effect of all forms, you can define them directly in CSS:

<style>
form{margin:0px}
</style>

Or

<style>
Form{display:inline}
</style>

Special Tips

This example adds a DIV element and sets a border to allow the reader to see the effect more clearly. Figure 1.4.9, figure 1.4.10 and figure 1.4.11 are respectively set before and after the comparison of the effects of this example.

Figure 1.4.9 A form before it is set

Figure 1.4.10 A form set by method

Figure 1.4.11 A form set by method two

Special Notes

The solution of the problem is to make use of the characteristics of block element and inline element, to transform each other, and the margin attribute of CSS object. This example is primarily about solving form-related problems, and for more detailed display and margin properties of CSS objects, refer to the second section.