Some hr tags have gaps inside them while other doesn't

html horizontal line
hr css mdn
html hr color
html horizontal line color
css prevent margin collapse
html line break
margin collapse css
html tags

I have a pen, which is basically a todo app. The todo items are actually li elements which have text, button and a hr. Some of them are having hr with spaces inside them while some doesn't.

Image:

HTML:

const j = $;

j(() => {
  let validify = txt => {
    if (txt.length > 0) {
      j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
    }

    j('.td-btn').on('mouseenter', function() {
      console.log('added');
      j(this)
        .parent()
        .addClass('del');
      console.log(j(this).parent().attr('class'))
    }).on('mouseleave', function() {
      console.log('removed')
      j(this)
        .parent()
        .removeClass('del');
    }).on('click', function() {
      j(this).parent().css('display', 'none');
    });

    j('#addtd').val('');
  }
  validify('');

  j('#btn').on('click', () => {
    validify(j('#addtd').val());
  });
});
@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
  font-family: Lato;
}

body {
  margin: 0;
  padding: 3vh 7vw;
  background: #004D40;
}

#in-ctn {
  position: fixed;
  width: 86vw;
  height: 16vh;
  background: #388E3C;
  box-shadow: 0 6px 9px #272727;
  z-index: 2;
}

#btn {
  position: absolute;
  border-radius: 100%;
  outline: none;
  border: none;
  right: 7vh;
  top: 3vh;
  width: 10vh;
  height: 10vh;
  font: 500 8vh arial;
  display: inline-block;
  transition: 0.25s all;
  background: #CDDC39;
}

#btn:hover {
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
  transform: scale(1.1);
}

#btn:active {
  transform: translateY(4px);
}

#addtd {
  position: absolute;
  outline: none;
  border: none;
  background: rgba(255, 255, 255, 0.33);
  width: 50vw;
  height: 6vh;
  top: 5vh;
  left: 5vw;
  font: 500 14pt Lato;
  padding: 0 10px;
}

#addtd::placeholder {
  color: #FFF;
}

#ctn {
  position: absolute;
  top: 27vh;
  width: 86vw;
  background: #388E3C;
  box-shadow: 0 6px 9px #272727;
  padding: 3vh 5vw;
  z-index: 1;
}

li.td {
  font: 500 20pt Lato;
  list-style: none;
  color: #FFF;
}

button.td-btn {
  float: right;
  outline: none;
  border: none;
  background: #E53935;
  height: 20px;
  position: relative;
  top: 25px;
  color: #FFF;
}

hr {
  border: 7px solid #9E9D24;
  padding: 0;
}

.del {
  color: #CDDC39 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div id='main'>
  <div id='in-ctn'>
    <button id='btn'>+</button>
    <input type='text' id='addtd' placeholder='Enter a new Todo' />
  </div>
  <div id='ctn'>
    <li class='td'>
      Code a Todo App
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Style the Elements
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Debug some problems
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Go for a walk
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
  </div>
</div>

This is happening due to CSS Sub pixel rendering. When you zoom-in/out of the browser, the rescaled elements will have left over pixel values like 5.75px etc. The vendor decides how to deal with that.

In your case the easiest fix, at least in Chrome, is to cancel the border radius to 0px, instead set the height of the hr to double the border and give it a background color:

border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;

javascript, The todo items are actually li elements which have text, button and a hr . Some of them are having hr with spaces inside them while some doesn't. The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Seems like this issue is browser related, since it works fine for most people. Possibly your browser has a default styling for hr elements. It is, however, nowadays bad practice to use a horizontal line for presentational terms. Source

You would be fine by using a border-bottom on your li element. If you want to position the border lower than the default position, you can use padding-bottom on the li element. Your HTML structure also looks a lot more clear with this.

For example, changing the styling of your CSS selector li.td to the following could do the trick:

li.td {
  font: 500 20pt Lato;
  list-style: none;
  color: #CDDC39;
  border-bottom: 10px solid #9E9D24;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

In case you really need to use the hr element, you could attempt to remove all default margin since some browsers add a margin by default. For that, add the following styling to the element:

margin: 0

which would result into

hr {
  border: 7px solid #9E9D24;
  padding: 0;
  margin: 0;
}

The HR Scorecard: Linking People, Strategy, and Performance, But the real story of value creation in any firm is much more complicated, so this behind them—can actually help to undermine HR's confidence and credibility. assessment challenge facing HR managers today, attribute measures should form on a 5-point scale is numerical, but it doesn't have much inherent meaning. In other browsers except IE7 and lower the hr displays a border around the hr tag which I don't want it to. Hr Tag in IE - remove border. put an HR inside

Did you edit your pen to fix the issue? When looking at your pen preview all <hr> tags are rendered without an empty space inside.

The only suggestion I have, is that in HTML <hr> doesn't need to be explicitly closed, unless you are using XHTML, then you need to properly close the tag <hr />. Since you are just writing HTML, I would go with the <hr>.

Hearing on H.R. 3850, the Fair Chance Act: Hearing Before the , TODAY, NEARLY HALF A CENTURY LATER, THAT GAP HAS NOT BEEN CLOSED. TODAY, 45% OF OUR NATION'S CHILDREN ATTEND SCHOOLS IN JUST WHILE SOME SCHOOLS SERVE EXCELLENCE, OTHERS SEEK MERELY QUALITY TEXTBOOKS, AND SCHOOL EQUIPMENT THAT DOESN'T DATE  HR tag doesn't seem to work in IE7 like Ralph and I to set them to display:none and style some other existing element instead leaving the HR in place for it's semantic purpose of indicating

<hr>: The Thematic Break (Horizontal Rule) element, The HTML hr element represents a thematic break between paragraph-level While it may still be displayed as a horizontal rule in visual browsers, this Tag omission, It must have start tag, but must not have an end tag. 1. Retention. Many people think that the main task of Human Resources is to source and employ new talent. However, the truth is that most HR activities revolve around retaining existing talent. Employees are the lifeblood of every company, providing the skills and experience required to keep productivity levels up.

Congressional Record: Proceedings and Debates of the Congress, Telemetry is the information generated and transmitted during missile test flights. In the original START treaty, each side was prohibited from encrypting or otherwise denying The new treaty doesn't use such an attribution rule the way the old treaty did. The other alleged monitoring gap has to do with the loss of the  Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML. Preserve Formatting

Basic Formatting, It's wonderful and all, but it lacks that certain something doesn't it? the Text | Tag Questions | Skipping Lines | Attributes | Headings · So let's see them! Do the tags have to be in CAPITALISED text? Some other very simple stuff is using lines across the page. To make them, use <hr> , which stands for 'Horizontal Rule​'. Addressing Gaps Directly on Your Resume. When it comes to a gap in employment on your resume, it’s best not to leave recruiters guessing. Including a brief blurb about your time away from the workforce will serve to proactively address any questions or concerns prospective employers may have.

Comments
  • Please post your code snippets here. Snippets from external links are discouraged in SO.
  • Are my eyes bad or I don't see what the problem is? The codepen looks fine to me.
  • @Rahul by default <hr> tag have some margin. margin: 0 mention if it does not work then add your code snippet.
  • I don't se problem on Chrome - on what browser you see problem?
  • I notice it with a zoom of 90%. Is this your case?
  • Thanks for your answer!
  • Thanks for the border-bottom css property!