无法控制标签和输入标签之间的垂直间距

Question

我正在尝试制作一个包含输入标签的HTML div，该标签的标签就在它上面。 div中有几个。 理想情况下，我希望这两对之间的距离很小。 一切都垂直放置。 当浏览器加载页面时，所有项目均等间距。 我一直在尝试调整边距，但这根本不起作用。

这是一个例子：

 #label_style { display: block; margin: 4px; color: blue; } #input_style { margin: 4px; height: 10px; } 

 <div id="left_col" style="height:400px;align=left"> <article> <h3 id="myHeader">Customer</h3> <h4><label id="label_style">Company:</label></h4> <h4><input id="input_style" type="text" name="company" value="ACME" maxlength="15"></h4> <h4><label id="label_style" style="margin:4">Street:</label></h4> <h4><input id="input_style" style="margin:4" type="text" name="street" value="123 Penn Ave" maxlength="20"></h4> </article> </div> 

感谢任何帮助。 我是HTML初学者。 谢谢！

Answer 1

您获得的间距来自h4标签。

只需选择它们并更改边距。

我建议将类添加到这些h4中，以便您可以在不同的CSS规则上选择h4标签和h4输入。

对于此类事情，请使用浏览器的开发工具，以便您查看空间的来源。

---

 #label_style { display: block; margin: 4px; color: blue; } #input_style { margin: 4px; height: 10px; } h4 { margin: 0; } 

 <div id="left_col" style="height:400px;align=left"> <article> <h3 id="myHeader">Customer</h3> <h4><label id="label_style">Company:</label></h4> <h4><input id="input_style" type="text" name="company" value="ACME" maxlength="15"></h4> <h4><label id="label_style" style="margin:4">Street:</label></h4> <h4><input id="input_style" style="margin:4" type="text" name="street" value="123 Penn Ave" maxlength="20"></h4> </article> </div> 

Answer 2

您应该重置h3 ， h4标签的边距。

h3, h4 {
  margin: 0;
}

请记住： #IDs必须是唯一的。 您可以使用.classes 。

您可以通过h3 ， h4标签设置CSS样式。

 #left_col { border: solid 1px #ccc; padding: 5px; } #left_col h3 { background-color: inherit; color: #444; } h3, h4 { margin: 0; } h4 label { background-color: inherit; color: blue; display: block; margin: 5px 0; } h4 input[type=text] { margin: 4px 0; padding: 5px; } 

 <div id="left_col"> <article> <h3>Customer</h3> <h4><label>Company:</label></h4> <h4><input id="txtCompany" type="text" name="company" value="ACME" maxlength="15"></h4> <h4><label>Street:</label></h4> <h4><input id="txtStreet" type="text" name="street" value="123 Penn Ave" maxlength="20"></h4> </article> </div>