QT5 styling QPushButton to remove space around it - css

Question

I creating simple sliding menu in Qt5 Qt Widgets Application.
All seems work fine and now my form look like this:
When i press button submenu showed and other element slides down.
Here code of the form:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>MainWindow</class>
<widget class="QMainWindow" name="MainWindow">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>695</width>
<height>388</height>
</rect>
</property>
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Minimum">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<widget class="QWidget" name="centralwidget">
<property name="styleSheet">
<string notr="true">QWidget#centralwidget {
border-top: 1px solid gray;
}</string>
</property>
<layout class="QHBoxLayout" name="horizontalLayout">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QWidget" name="menuContainerBox" native="true">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>101</width>
<height>0</height>
</size>
</property>
<property name="autoFillBackground">
<bool>false</bool>
</property>
<property name="styleSheet">
<string notr="true">QWidget#menuContainerBox{
border-right: 1px solid gray;
}
QWidget#menuBoxWidget QPushButton
{
border: 1px solid gray;
border-bottom: none;
border-left: none;
border-right: none;
padding: 3 20px;
text-align: left;
}
QWidget#menuBoxWidget QWidget QPushButton
{
padding: 3 10px;
text-align: right;
}
QWidget#menuBoxWidget QWidget QPushButton:hover
{
background-color: rgb(168, 168, 168);
}
QWidget#menuBoxWidget QPushButton:hover
{
background-color: rgb(168, 168, 168);
}
QWidget#menuBoxWidget {
border-bottom: 1px solid gray;
}</string>
</property>
<layout class="QVBoxLayout" name="menuContainer">
<property name="spacing">
<number>0</number>
</property>
<property name="sizeConstraint">
<enum>QLayout::SetDefaultConstraint</enum>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QWidget" name="menuBoxWidget" native="true">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Minimum">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>100</width>
<height>0</height>
</size>
</property>
<property name="baseSize">
<size>
<width>0</width>
<height>0</height>
</size>
</property>
<layout class="QVBoxLayout" name="menuBox">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QPushButton" name="menu1">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>100</width>
<height>0</height>
</size>
</property>
<property name="text">
<string>Menu1</string>
</property>
</widget>
</item>
<item>
<widget class="QWidget" name="subMenuBox1" native="true">
<property name="enabled">
<bool>true</bool>
</property>
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Minimum">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>100</width>
<height>0</height>
</size>
</property>
<property name="styleSheet">
<string notr="true"/>
</property>
<layout class="QVBoxLayout" name="verticalLayout_4" stretch="0,0">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QPushButton" name="pushButton_5">
<property name="text">
<string>Submenu1_1</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="pushButton">
<property name="styleSheet">
<string notr="true"/>
</property>
<property name="text">
<string>Submenu1_2</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QPushButton" name="menu2">
<property name="sizePolicy">
<sizepolicy hsizetype="Minimum" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>100</width>
<height>0</height>
</size>
</property>
<property name="text">
<string>Menu2</string>
</property>
</widget>
</item>
<item>
<widget class="QWidget" name="subMenuBox2" native="true">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Minimum">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>100</width>
<height>0</height>
</size>
</property>
<layout class="QVBoxLayout" name="verticalLayout_5">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QPushButton" name="pushButton_11">
<property name="text">
<string>Submenu2_1</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="pushButton_7">
<property name="text">
<string>Submenu2_2</string>
</property>
</widget>
</item>
<item>
<widget class="QPushButton" name="pushButton_8">
<property name="text">
<string>Submenu2_3</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QPushButton" name="menu3">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>100</width>
<height>0</height>
</size>
</property>
<property name="text">
<string>Menu3</string>
</property>
</widget>
</item>
<item>
<widget class="QWidget" name="subMenuBox3" native="true">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Minimum">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>0</width>
<height>0</height>
</size>
</property>
<layout class="QVBoxLayout" name="verticalLayout_6">
<property name="spacing">
<number>0</number>
</property>
<property name="leftMargin">
<number>0</number>
</property>
<property name="topMargin">
<number>0</number>
</property>
<property name="rightMargin">
<number>0</number>
</property>
<property name="bottomMargin">
<number>0</number>
</property>
<item>
<widget class="QPushButton" name="pushButton_9">
<property name="text">
<string>Submenu3_1</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<spacer name="verticalSpacer">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>50</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QPushButton" name="LogoBtn">
<property name="styleSheet">
<string notr="true">border: none;
font-width: bold;</string>
</property>
<property name="text">
<string>LOGO</string>
</property>
</widget>
</item>
</layout>
</widget>
</item>
<item>
<spacer name="horizontalSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menubar">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>695</width>
<height>21</height>
</rect>
</property>
<widget class="QMenu" name="menuFile">
<property name="title">
<string>File</string>
</property>
<addaction name="actionExit"/>
</widget>
<widget class="QMenu" name="menuAbout">
<property name="title">
<string>About</string>
</property>
<addaction name="actionAbout"/>
</widget>
<addaction name="menuFile"/>
<addaction name="menuAbout"/>
</widget>
<action name="actionAbout">
<property name="text">
<string>About...</string>
</property>
</action>
<action name="actionExit">
<property name="text">
<string>Exit</string>
</property>
</action>
</widget>
<resources/>
<connections/>
</ui>
and here program code:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QDebug>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->subMenuBox1->hide();
ui->subMenuBox2->hide();
ui->subMenuBox3->hide();
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::on_menu1_clicked()
{
qInfo() << "Clicked!";
if (ui->subMenuBox1->isHidden()){
ui->subMenuBox1->show();
ui->subMenuBox2->hide();
ui->subMenuBox3->hide();
}
}
void MainWindow::on_menu2_clicked()
{
qInfo() << "Clicked!";
if (ui->subMenuBox2->isHidden()){
ui->subMenuBox2->show();
ui->subMenuBox1->hide();
ui->subMenuBox3->hide();
}
}
void MainWindow::on_menu3_clicked()
{
qInfo() << "Clicked!";
if (ui->subMenuBox3->isHidden()){
ui->subMenuBox3->show();
ui->subMenuBox2->hide();
ui->subMenuBox1->hide();
}
}
it simple and works just fine.
But now i need to style it, by removing all spaces between buttons and align buttons text to left and submenu buttons text little to right.
I try set padding:0 for subMenuBox1 but it only affect buttons height.
Also i need add line on right side of menuBoxWidget so it divide menu from other screen.
How to style it, so menu looks nice?
UPDATE 1:
I updated form code with styles added.

Answer 1

Ok, i figure out how it works!
Here styles:
QWidget#menuContainerBox{
border-right: 1px solid gray;
}
QWidget#menuBoxWidget QPushButton
{
border: 1px solid gray;
border-bottom: none;
border-left: none;
border-right: none;
padding: 3 20px;
text-align: left;
}
QWidget#menuBoxWidget QWidget QPushButton
{
padding: 3 10px;
text-align: right;
}
QWidget#menuBoxWidget QWidget QPushButton:hover
{
background-color: rgb(168, 168, 168);
}
QWidget#menuBoxWidget QPushButton:hover
{
background-color: rgb(168, 168, 168);
}
QWidget#menuBoxWidget {
border-bottom: 1px solid gray;
}
And now it looks like, it very basic, but it works and looks like i wanted!