How to eliminate extra space before and after a <form> tag ?
In this article, we are going to learn how to eliminate the extra space after a form tag in HTML.
Approach 1: We can remove space between any two tags by simply using margin-bottom property. The margin-bottom property sets the bottom margin of an element. We will assign a negative value to the margin-bottom of a particular tag to eliminate the extra space between the tags as shown.
The below examples will demonstrate this approach.
Example: In this example, we will remove extra space between the first header tag and the form by setting the margin-bottom to -8px of the first header tag.
HTML
<!DOCTYPE html> < html lang = "en" > < body > < h1 style = "margin-bottom: -8px;" > FORM BELOW </ h1 > < form > < label for = "fname" > First name: </ label > < br > < input type = "text" id = "fname" name = "fname" > < br > < label for = "lname" > Last name: </ label > < br > < input type = "text" id = "lname" name = "lname" > </ form > < h1 >FORM ABOVE</ h1 > </ body > </ html > |
Output:
Approach 2: We can also eliminate the extra space using the margin-top property. The margin-top property sets the top margin of an element. When we use margin-top we have to apply it on the tag, such that we have to eliminate extra space above it. This example demonstrates this approach.
Example: In this example, we will remove extra space between the form and the second header tag by setting the margin-top to -8px of the form tag.
HTML
<!DOCTYPE html> < html lang = "en" > < body > < h1 >FORM BELOW</ h1 > < form > < label for = "fname" > First name: </ label >< br > < input type = "text" id = "fname" name = "fname" > < br > < label for = "lname" > Last name:</ label >< br > < input type = "text" id = "lname" name = "lname" > </ form > < h1 style = "margin-top: -8px;" > FORM ABOVE </ h1 > </ body > </ html > |
Output: