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输入。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

2 个答案: