Having trouble controlling vertical spacing between Label and Input Tag

Question

I am trying to make an HTML div that contain input tags, whose label is just above it. There are several of these in the div. Ideally, I would like a small gap between these pairs. Everything is laid out vertically. When the Browser loads the page, all the items are equally spaced out. I've been trying to adjust margins, and it just doesn't work.

Here is an example:

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

Appreciate any help with this. I am an HTML beginner. Thanks!

Answer 1

The spacing you got comes from the h4 tags.

Just select them and change the margin.

I would recommend adding class to those h4's so you can select the h4 label and the h4 input on different css rules.

For this kind of things use the dev tools of your browser so you can see where the space comes from.

---

 #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

You should reset the margins of the h3 , h4 tags.

h3, h4 {
  margin: 0;
}

Remember: #IDs must be unique. You can use .classes .

You can set CSS styles through the h3 , h4 tags.

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