CSS- removing hr tag space not working

Question

I have read multiple posts, I've followed the instructions and still no change. What I am after is to remove the space in between the hr tag and my form. I thought by setting the margin and padding to 0 would do the fix, instead I'm getting this:

But instead I want something like the image below - just with a line in separating the fields.

html

<label for="Fridss" class="label"> F </label>
<button type="button" id="add" name="add" class="btn btn-default addButton" onClick="addInput('dynamicInput');">
  <span class="glyphicon glyphicon-plus"></span>
</button>
<input type="text" name="Fridss" id="Fri" class="open_hours" placeholder="--:--" required tabindex="16">
<span>-</span>
<input type="text" name="Fridss" id="Friday" class="open_hours" placeholder="--:--" required tabindex="17">
<hr />

css

hr {
  padding: 0;
  margin: 0;
  width: 400px;
  border-top: 1px dotted #58585b;
}
.open_hours {
  padding: 0;
  margin: 0;
  border-radius: 5px;
  width: 20%;
  height: 25px;
}

or is there a better way of creating lines in css.

Answer 1

It really does depend on the browser's built-in styles. Check the fiddle: https://jsfiddle.net/abstractecho/7a3gzpqL/

body{color: black;}
hr {
  padding: 0 !important;
  margin: 0 !important;
  width: 400px;
  border-top: 1px dotted #58585b;
}
.open_hours {
  padding: 0;
  margin: 0;
  border-radius: 5px;
  width: 20%;
  height: 25px;
}

You may want to check if adding an margin: 0 !important to your hr css to override browser styles and let me know if it works.

Answer 2

Nowadays hr tag is used very seldom, and if you need semantic markup, you may to use css-property border. In your case, you have classic list including similar elements, so semantic way to use ul tag and include every line in li tags.

<li>
  <label for="Fridss" class="label"> M </label>
  <button type="button" id="add" name="add" class="fa fa-plus-square-o addButton" onClick="addInput('dynamicInput');">
  </button>
  <input type="text" name="Fridss" id="Fri" class="open_hours" placeholder="--:--" required tabindex="16"> -
  <input type="text" name="Fridss" id="Friday" class="open_hours" placeholder="--:--" required tabindex="17">
</li>

li {
  width: 400px;
  border-bottom: 1px dotted #58585b;
}

I used your code, removed all extra tags (to my mind) and created JSFiddle-example with your code