Where does spacing between Panes come from?

Question

I've looked at tons of questions on SO about content margins in QML, but all the answers point to missing spacing: 0 properties. I've done all that, but still get weird spaces that I cannot eliminate. Can anyone explain why this QML code:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Test")

    RowLayout {
        spacing: 0
        anchors.margins: 0, 0, 0, 0
        anchors.fill: parent;

        Pane {
            anchors.margins: 0, 0, 0, 0
            id: menuPane
            anchors.top: parent.top;
            anchors.bottom: parent.bottom;
            width: 200

            ColumnLayout {
                spacing: 0
                anchors.fill: parent
                anchors.margins: 0, 0, 0, 0

                Rectangle {
                    id: testRect
                    Layout.fillWidth: true
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 20
                    color: "green"
                }
            }
        }

        Pane {
            anchors.margins: 0, 0, 0, 0
            anchors.left: menuPane.right
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom

            Rectangle {
                anchors.margins: 0, 0, 0, 0
                anchors.fill: parent
                color: "black"
            }
        }
    }
}

is rendered like this?

Why are the margins between the rectangles there?

Answer 1

This answer is short:

Set the property padding to 0 for your panes, and there won't be no margins left.
You can also set all paddings separately (leftPadding ...) Those properties are inherited from Control

Looks like this in your example:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Test")

    RowLayout {
        spacing: 0
        anchors.margins: 0
        anchors.fill: parent;

        Pane {
            anchors.margins: 0
            id: menuPane
            anchors.top: parent.top;
            anchors.bottom: parent.bottom;
            width: 200
            padding: 0


            ColumnLayout {
                spacing: 0
                anchors.fill: parent
                anchors.margins: 0

                Rectangle {
                    id: testRect
                    Layout.fillWidth: true
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 20
                    color: "green"
                }
            }

            Component.onCompleted: console.log(bottomPadding, leftPadding)
        }

        Pane {
            anchors.margins: 0
            anchors.left: menuPane.right
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            padding: 0

            Rectangle {
                anchors.margins: 0
                anchors.fill: parent
                color: "black"
            }
        }
    }
}