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  />
    <div  />
    <div  />
    <div  />
  </div>

for e.g. on Safari responsive mode this is not shown.

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.

CodePudding user response：

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;
}

CodePudding user response：

As you can see, browsers provide margin and padding by default. Therefore you need to use * { margin:0; padding: 0; }