Unwanted visible background in bordered element-CodePudding

I need red left sqare to fill 100% height of parent element (el. with red border) like this:

but on my notebook (full hd, scale in chrome 100%) it looks like this:

If you can see there is visible background black on top and left side that red square. (If your render is like pic.1 you can scale up/dow scale in browser)

How can i to reach render like picture 1?

Here fiddle:

https://jsfiddle.net/dLnj6394/

HTML:

<div class="line">
  <div class="year">a
  </div>
</div>

<div class="line">
  <div class="year">a
  </div>
</div>

<div class="line">
  <div class="year">a
  </div>
</div>

CSS:

.line {
  border: 1px solid red;
  background-color: black;
  display: inline-block;
  width: 100%;
}

.year {
  float: left;
  background-color: red;
  width: 50px;
  height: 40px;
}

CodePudding user response：

.line {
  border: 1px solid red;
  background-color: black;
  display: block;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
}

.year {
  float: left;
  background-color: red;
  width: 50px;
  height: 40px;
}

<div class="line">
  <div class="year">a
  </div>
</div>

<div class="line">
  <div class="year">aa
  </div>
</div>

<div class="line">
  <div class="year">a
  </div>
</div>

Is that okay now? How do you see it in the browsers?

CodePudding user response：

A slightly hacky workaround is to give the line elements a stripe of red on the left as background so there is no black to show when you get the 'rounding error' of split pixels.

 background-image: linear-gradient(to right, red 0 50px, transparent 50px 100%);