Проблемы с отображением в браузере - PullRequest
0 голосов
/ 09 января 2020

Я заметил крошечную проблему рендеринга в браузерах, и мне было интересно, знает ли кто-нибудь, как это исправить.

Это не происходит, когда браузер работает в полноэкранном режиме или развернут, а скорее только когда браузер работает. изменен в меньшем окне. Я заметил это на Chrome, Firefox и на данный момент. Вот мой код S css, чтобы вы могли видеть то, что я описываю:

<div class="parent">
    <div class="child"></div>
</div>


.parent {
   width: 600px;
   height: 400px;
   border: 1px solid black;
   margin: auto;
   padding: 0;
   overflow: hidden;

   .child{
       width: 100%;
       height: 50px;
       background: #000;
    }
  }

На изображении вы видите небольшое пустое пространство между родительским div и дочерним div.

белое пространство обведено красным.

Так кто-нибудь знает, что вызывает эту незначительную проблему?

1 Ответ

0 голосов
/ 09 января 2020

Это может быть вызвано пробелом в вашем html между родителем и ребенком. Вы можете проверить это, удалив все пробелы и просмотрев его, если проблема решена, поэтому вместо этого:

<div>

   <h1>Title here</h1>

</div>

вы можете попробовать:

<div><h1>Title here</h1></div>

Если это не сработает, быстрое решение также может заключаться в добавлении 1px отрицательного поля для дочернего элемента (margin-left: -1px)

...