Space items by using margins instead of spaces

* also changed name of topbutton container back to topbutsOuter as it is clearer
* starting with Chromium 83, `row-gap` would be better suited for this

qt/aqt/data/web/css/editor.scss

@@ -33,7 +33,7 @@ body {
     margin: 0;
 }
 
-#topbuts {
+#topbutsOuter {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -44,6 +44,18 @@ body {
     padding: 2px;
 }
 
+.topbuts > button {
+    margin: 0 1px;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    &:last-child {
+        margin-right: 0;
+    }
+}
+
 .topbut {
     width: 16px;
     height: 16px;

qt/aqt/editor.py

@@ -72,10 +72,10 @@ audio = (
 _html = """
 <style>
 html { background: %s; }
-#topbuts { background: %s; }
+#topbutsOuter { background: %s; }
 </style>
 <div>
-    <div id="topbuts">
+    <div id="topbutsOuter">
         %s
     </div>
     <div id="fields">
@@ -204,10 +204,10 @@ class Editor:
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
         topbuts = """
-            <div id="topbutsleft">
+            <div id="topbutsleft" class="topbuts">
                 %(leftbts)s
             </div>
-            <div id="topbutsright">
+            <div id="topbutsright" class="topbuts">
                 %(rightbts)s
             </div>
         """ % dict(
@@ -328,7 +328,7 @@ class Editor:
             class_ = ""
         if not disables:
             class_ += " perm"
-        return """ <button tabindex=-1
+        return """<button tabindex=-1
                         {id}
                         class="{class_}"
                         type="button"