How to remove padding inside QTabWidget tabs?

As you can see from the image there is a border around the text editor inside the QTabWidget.

I set the stylesheet like this:

tab.setStyleSheet("QTabWidget::pane { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab:selected { background-color: #349117; }")

If I set margin negative, it helps but then things look a bit out of place and also I don't want to hard code values that might only work on my system but not others.

Here is the code:

import os, sys
from PySide2 import QtGui, QtCore, QtWidgets, QtWebEngineWidgets, QtWebChannel


# monaco editor index html file
file = "./index.html"

tab = QtWidgets.QTabWidget()
bgcolor = tab.palette().color(QtGui.QPalette.Background)

editor = QtWebEngineWidgets.QWebEngineView()
editor.load(QtCore.QUrl.fromLocalFile(file))
tab.setStyleSheet("QTabWidget::pane { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab { margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid black; } QTabBar::tab:selected { background-color: #349117; }")

tab.addTab(editor, "python1")
tab.show()

The border seems to come from the HTML page shown. Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="min-height: calc(100vh - 40px); margin: 0; padding: 0; box-sizing: border-box; border: 0px"></div>

<script src="monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'python',
            fontFamily:"Verdana",
            fontSize: "20px",
            lineNumbers: "on",
            roundedSelection: false,
            scrollBeyondLastLine: true,
            readOnly: false,
            formatOnPaste: true,
            insertSpaces: true,
            automaticLayout: true,
            theme: "vs-dark"
        });
    });
</script>
</body>
</html>

Solution

That padding is generated in HTML and can be removed using css:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<style >
    #container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

</style>
<body>

<div id="container"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'python',
            fontFamily:"Verdana",
            fontSize: "20px",
            lineNumbers: "on",
            roundedSelection: false,
            scrollBeyondLastLine: true,
            readOnly: false,
            formatOnPaste: true,
            insertSpaces: true,
            automaticLayout: true,
            theme: "vs-dark"
        });
    });
</script>
</body>
</html>