Как убрать этот отступ между родительским border и дочерним элементом?

Question

[Эмиль Рахматуллин]

Видите это расстояние между бордером родителя и заливкой дочерней? Как её убрать? Честно сказать, первый раз такое вижу.


HTML:

<div class="preloader__progress">
	<div id="progressBar" class="preloader__progress-bar"></div>
</div>

CSS:

.preloader__progress {
	position: relative;
	overflow: hidden;
	height: 40px;
	width: 996px;
	max-width: 90%;
	margin: auto;
	border: 2px solid #fff;
}

.preloader__progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #fff;
}

Такие штуки, как увеличение высоты и смешение не помогают, как будто там задана внутренняя прозрачная граница, но её там нет...

Comments

[Эмиль Рахматуллин]

И если приближать на 200% экран, то показывается нормально.
У других ребят такая же ситуация

[Ankhena]

Эмиль Рахматуллин, Смотрите: https://jsfiddle.net/x8vcgf1d/ это ваш код.
И нет никаких лишних отступов.

[Эмиль Рахматуллин]

Евгений Голубев, https://jsfiddle.net/4k5sgfeb/ и что?

Это расстояние там также есть. Откуда?

[Эмиль Рахматуллин]

Евгений Голубев, вот мой css:

.preloader__progress {
  position: relative;
  overflow: hidden;
  height: 40px;
  width: 996px;
  max-width: 90%;
  margin: auto;
  border: 2px solid #fff;
}

.preloader__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
}

Там нет того, что у тебя на скрине. Скопируй посмотри

[Эмиль Рахматуллин]

Евгений Голубев, прикалываешься?

[Эмиль Рахматуллин]

Евгений Голубев, откуда эта фигня?

[Эмиль Рахматуллин]

Мне же надо, чтобы плотно всё прилегало

[Ankhena]

Эмиль Рахматуллин,
В хроме даже с темным фоном никаких артефактов нету.
Проверять за вас все браузеры было бы странно.

Но в качестве намека: абсолют там вообще лишний. И второй блок тоже.
Специально для этой цели придумали тег progress.
Если он по какой-то причине не нравится, то это делают в один div и градиент.

[Эмиль Рахматуллин]

Евгений Голубев, мне НАДО, чтобы он был. Это прелоадер https://jsfiddle.net/70125g9x/42/ .

[Эмиль Рахматуллин]

Умники такие, ужас

Answer 1

[Эмиль Рахматуллин]

Сделал через градиент лоадер -> https://jsfiddle.net/70125g9x/49/