如何使用 CSS 在两个 <input> 行之间添加空格？

Question

我想用 CSS 控制布局。如何使用 CSS 调节 <input> 元素（我希望它们在两行）之间的空格？

 <form name="publish" id="publish" action="publishprocess.php" method="post">
  Title:<input type="text" id="title" name="title" size="60" maxlength="110" value="<?php echo $title ?>" <br/>
  <div>Contact<input type="text" id="contact" name="contact" size="24" maxlength="30" value="<?php echo $contact ?>" /></div><br/> Task description(You may include task description, requirements on bidders, time requirements,etc):<br/>
  <textarea name="detail" id="detail" rows="7" cols="60" style="font-family:Arial, Helvetica, sans-serif"><?php echo $detail ?></textarea>

  <br/><br/> price <input type="text" id="price" name="price" size="10" maxlength="20" value="<?php echo $price ?>" /><br/>
  <label> Skill or Knowledge Tags</label><br/><input class="tagvalidate" type="text" id="tag" name="tag" size="40" maxlength="60" value="<?php echo $tag ?>" />
  <br/><label>Combine multiple words into single-words, space to separate up to 3 tags<br/>(Example:photoshop quantum-physics computer-programming)</label><br/><br/> District Restriction:
  <?php echo $locationtext.$cityname; ?><br/><br/>

  <input type="submit" id="submit" value="submit" /></form>

如您所见，我使用 <br/> 来分隔元素并获取空格，有没有更好的方法呢？

原文由 Steven 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

#detail {margin-bottom:5px;}

原文由 Paul Creasey 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

您还可以将文本包装在标签字段中，这样您的表单在语义上将更易于自我解释。

只需记住将标签和输入浮动到左侧，并为它们和包含的表单添加特定的宽度。然后您可以为它们添加边距，以调整行之间的间距（当然，您知道这是一个非常小的标记，期望内容与某个限制一样大）。

这样您就不必再添加任何元素，只需添加标签输入对，所有这些元素都包含在一个表单元素中。

例如：

 <form>
<label for="txtName">Name</label>
<input id"txtName" type="text">
<label for="txtEmail">Email</label>
<input id"txtEmail" type="text">
<label for="txtAddress">Address</label>
<input id"txtAddress" type="text">
...
<input type="submit" value="Submit The Form">
</form>

CSS 将是：

 form{
float:left; /*to clear the floats of inner elements,usefull if you wanna add a border or background image*/
width:300px;
}
label{
float:left;
width:150px;
margin-bottom:10px; /*or whatever you want the spacing to be*/
}
input{
float:left;
width:150px;
margin-bottom:10px; /*or whatever you want the spacing to be*/
}

原文由 dizzy_fingers 发布，翻译遵循 CC BY-SA 2.5 许可协议