0

Chrome dev tools is showing a 1px line between divs.

The lines only appear in dev tools responsive mode on chrome

  <div>
    <h1 style="font-size: 14px">
      tf
    </h1>
    <div class="bg-blue-900 py-8" />
    <div class="bg-blue-900 py-8" />
    <div class="bg-blue-900 py-8" />
    <div class="bg-blue-900 py-8" />
  </div>

enter image description here

for e.g. on Safari responsive mode this is not shown. enter image description here

Anyone has an idea of why this might be happening - is it just a bug with chrome?

P.S. I don't have any external css libraries other than tailwind which basically just makes sure there are no default css values in the way.

Also, not possible to inspect that line and it's not a margin or border of the existing divs.

Dr. House
  • 483
  • 7
  • 23

1 Answers1

0

This is not a browser bug. This is the default page style. You need to add the following code to your styles.

* {
    margin: 0;
    padding: 0;
}
Mahdi Najafi
  • 5
  • 2
  • It might be a browser bug: https://stackoverflow.com/questions/30983212/1px-white-spacing-in-chrome-between-divs https://stackoverflow.com/questions/56370595/varying-0-1px-gap-between-div-background-and-border-on-high-dpi-displays – ChenBr Dec 23 '22 at 10:10