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

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>