0

I'm building an extension for Google Chrome and I'm noticing an issue where there's a small white line at the bottom and right side of my popup. Not sure what could be adding this here since I'm not changing the margin anywhere in my CSS.

Screenshot

popup.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="../styles/popup.css" />
    </head>
    <body>
        <div class="mainContainer"></div>
    </body>
</html>

popup.css:

:root {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    background-color: #262b40;
}

.mainContainer {
    width: 40rem;
    height: 40rem;
}
wOxxOm
  • 53,493
  • 8
  • 111
  • 119
aekala
  • 1
  • 2

1 Answers1

0

The horizontal & vertical Line could be the scroll bars. can you specify the max height & max width of the container so that it will automatically be hidden.

you can also use css property to hide the scroll bars.

overflow: hidden;
ihappyk
  • 505
  • 1
  • 5
  • 16
  • there's isn't any scrolling in the container, but I tried adding this CSS property anyway and no difference – aekala Mar 16 '22 at 23:40
  • can you post the html that your trying to display it on the click of chrome extension? – ihappyk Mar 17 '22 at 12:02
  • the html is posted in the question. The actual html for the extension is more involved so I wrote this barebones code to demonstrate the issue. – aekala Mar 17 '22 at 16:20
  • did you try adding margin:0 to the body? also try with padding:0 . – ihappyk Mar 17 '22 at 16:38