Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Removing space before Form tag

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:

Removing space after Form tag


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!