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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...