How to eliminate extra space before and after a <form> tag ?
Last Updated :
23 Nov, 2021
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:
Share your thoughts in the comments
Please Login to comment...