HTML 如何清除表单标签前后的额外空间

在本文中，我们将学习如何清除表单HTML元素前后的额外空间，以确保清晰紧凑的表单布局。

在设计Web应用程序时，对于间距和布局的控制至关重要，以创建视觉上愉悦和组织良好的用户界面。有时，在一个标签前后会有额外的空间，这可能会影响表单元素的整体设计和对齐。

让我们通过一些示例来了解如何去除额外的空间。

示例1

在这个示例中，我们将通过将表单标签的边距和填充设置为0来去除额外的空间。

文件名：index.html

<html lang="en">
   <head>
      <title>How to eliminate extra space before and after a form tag?</title>
      <style>
         form {
            margin: 0;
            padding: 0;
         }
      </style>
   </head>
   <body>
      <h3>How to eliminate extra space before and after a form tag?</h3>
      <form>
         <label for="name">Name:</label>
         <input type="text" name="name" placeholder="Enter your name" />
         <label for="email">Email:</label>
         <input type="email" name="email" placeholder="Enter your email" />
         <input type="submit" value="Submit" />
      </form>
   </body>
</html>

示例2

在这个示例中，我们将遵循上面的代码模式，并对表单标签应用内联样式，以消除其上的任何边距和填充。

文件名：index.html

<html lang="en">
   <head>
      <title>How to eliminate extra space before and after a form tag?</title>
   </head>
   <body>
      <h3>How to eliminate extra space before and after a form tag?</h3>
      <form style="margin: 0; padding: 0;">
         <label for="name">Name:</label>
         <input type="text" name="name" placeholder="Enter your name" />
         <label for="email">Email:</label>
         <input type="email" name="email" placeholder="Enter your email" />
         <input type="submit" value="Submit" />
      </form>
   </body>
</html>

例子3

在这个例子中，我们将遵循上面的代码模式，并通过使用Normalize.css CDN重置CSS来移除表单标签中的空格。

文件名：index.html

<html lang="en">
   <head>
      <title>How to eliminate extra space before and after a form tag?</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
   </head>
   <body>
      <h3>How to eliminate extra space before and after a form tag?</h3>
      <form>
         <label for="name">Name:</label>
         <input type="text" name="name" placeholder="Enter your name" />
         <label for="email">Email:</label>
         <input type="email" name="email" placeholder="Enter your email" />
         <input type="submit" value="Submit" />
      </form>
   </body>
</html>

示例4

在这个示例中，我们将按照上面的代码模式，并借助4种不同的方法从表单标签中消除额外的空格，使用CSS flexbox，将父元素的字体大小设置为0px，使用负边距，并去除HTML中的换行和空格。

文件名：index.html

<html lang="en">
<head>
   <title>How to eliminate extra space before and after a form tag?</title>
   <style>
      /* Example 1: Using CSS Flexbox */
      .flex-container {
         display: flex;
         flex-direction: column;
      }

      /* Example 2: Setting font size to 0 on parent elements */
      .font-zero {
         font-size: 0;
      }

      /* Example 3: Using Negative Margin */
      .negative-margin {
         margin: -10px;
      }

      /* Example 4: Removing line breaks and white spaces in HTML */
         form.no-spacing {
            line-height: 0;
         }
   </style>
</head>
<body>
   <h3>How to eliminate extra space before and after a form tag?</h3>

   <h4>Using CSS Flexbox</h4>
   <!-- Example 1: Using CSS Flexbox -->
   <div class="flex-container">
      <form>
         <label for="name">Name:</label>
         <input type="text" name="name" placeholder="Enter your name" />
         <label for="email">Email:</label>
         <input type="email" name="email" placeholder="Enter your email" />
         <input type="submit" value="Submit" />
      </form>
   </div>
   <br />
   <br />
   <br />

   <h4>USetting font size to 0 on parent elements</h4>
   <!-- Example 2: Setting font size to 0 on parent elements -->
   <div class="font-zero">
      <form>
         <label for="name">Name:</label>
         <input type="text" name="name" placeholder="Enter your name" />
         <label for="email">Email:</label>
         <input type="email" name="email" placeholder="Enter your email" />
         <input type="submit" value="Submit" />
      </form>
   </div>
   <br />
   <br />
   <br />
   <h4>Using Negative Margin</h4>
   <!-- Example 3: Using Negative Margin -->
   <div class="negative-margin">
      <form>
         <label for="name">Name:</label>
         <input type="text" name="name" placeholder="Enter your name" />
         <label for="email">Email:</label>
         <input type="email" name="email" placeholder="Enter your email" />
         <input type="submit" value="Submit" />
      </form>
   </div>
   <br />
   <br />
   <br />

   <h4>Removing line breaks and white spaces in HTML</h4>
   <!-- Example 4: Removing line breaks and white spaces in HTML -->
   <form class="no-spacing">
      <label for="name">Name:</label><input type="text" name="name" placeholder="Enter your name" /><label for="email">Email:</label><input type="email" name="email" placeholder="Enter your email" /><input type="submit" value="Submit" />
   </form>
</body>
</html>