Question

I have some CSS:

fieldset {
    border-radius: 5px;
    border: 3px solid blue;
    padding: 5px;
    margin: 0em;
}
legend {
    font-weight: bold;
    color: green;
}
#myform{
    width: 330px;
    margin: 0em;
}
body {
    font-family: Arial, sans-serif;
}

When I embed it with <style>, it works perfectly fine:

But when I put the same CSS into a stylesheet and import it using <link>, I get some random whitespace:

I have removed the form elements completely, and there is still whitespace (although if I keep them in, there is considerably more of it). I used the Chrome developers console to check form and body height using $(body).css("height") (and the same for the form), and it gives me a number which is way too small to include the whitespace, but seems to match the height if the whitespace is ignored. Where is this coming from?

Answer 1

This seems to be a bug, when changing the margin of the body back and forth in the developers console it gets right again. Setting this property in the CSS doesn’t have any effect at all.

A measly workaround would be creating a javascript file for your popup, like popup.js, and then change the margin in there after the popup window is loaded:

document.addEventListener('DOMContentLoaded', function() {
  document.body.style.margin = '8px';
});

I took 8px as value because that’s the standard value of a Chrome popup:

You should consider reporting this bug to the Chrome issues list.