Nicht zwingend. Es ist nicht immer schön, aber als Pauschalaussage unterschreibe ich das nicht. Das muss man situativ bewerten. Welche konkrete Alternative schlägst du in diesem Fall vor? Du musst ja eine bessere Alternative haben, wenn du das schreibst. Dann wäre es zielführend, diese auch zu teilen.
Dass es Aunahmen geben kann hatte ich schon erwähnt.
Hier ein kleines Experiment:
toolbar .toolbarbutton-1 {
margin: 0px -5px !important;
outline: 1px solid red !important;
outline-offset: -1px !important;
}
toolbar .toolbarbutton-1 image {
outline: 1px solid green;
outline-offset: -1px !important;
}Die Buttons überlappen sich bzw. ragen auch in andere Elemente hinein, an einigen Stellen kann es an den Übergängen daher zum Flackern der beteiligten Elemente kommen.
Auch mal Tab Overflow testen damit, flackert bei mir.
Man darf bei den Buttons nicht vergessen, dass idR. der Button an sich nicht gesamt sichtbar ist, sondern nur der Inhalt und dessen Hintergrundfarben, Outlines etc..
Aktiv als Schaltfläche is aber der gesamte Button, hier .toolbarbutton-1.
Die visuellen horizontalen Abstände kommen dann (nicht alle) vom Padding innerhalb der Buttons, soweit ich sehe durch die Variable --toolbarbutton-outer-padding, die ich aber nicht anfassen würde.
Ergo würde ich in diesem Fall so etwas zum Testen vorschlagen, hier nur für die angefragte Navbar:
(Nachtrag: irgendwas ist doch immer mit den verdammten Buttons)
#nav-bar .toolbarbutton-1 {
padding-inline: 0px !important;
}
#nav-bar .toolbaritem-combined-buttons {
margin-inline: 0px !important;
}
/*Nachtrag*/
#nav-bar #PanelUI-menu-button {
padding-inline-end: var(--toolbar-start-end-padding) !important;
}
#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
#nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
padding-inline-start: var(--toolbar-start-end-padding) !important;
}Die -1px extra bei Andreas, wohl um Outlines hübscher aufeinander zu legen, scheinen laut Screenshot im Originalbeitrag nicht nötig zu sein, da keine permanente Outline um die Buttons ist.
Screen vom bösen Code:
