資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何消除表單標籤前後的額外空格？
在本文中，我們將學習如何消除表單 HTML 元素前後的額外空格，以確保表單佈局簡潔緊湊。
在設計 Web 應用程式時，控制間距和佈局至關重要，以建立視覺上令人愉悅且組織良好的使用者介面。有時，表單標籤 <form> 前後會出現額外的空格，這可能會影響表單元素的整體設計和對齊。
讓我們透過一些示例瞭解如何去除額外的空格。
示例 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>
結論
總之，消除表單標籤 <form> 前後的額外空格對於在 Web 設計中實現簡潔緊湊的表單佈局至關重要。透過理解和應用本文中討論的技術，我們學習瞭如何去除表單標籤前後任何額外的空格，以呈現乾淨的使用者介面。
更新於： 2023年8月3日
690 次瀏覽
廣告