--- a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -55,30 +55,24 @@ module.exports = createClass({
       {
         className: "boxmodel-properties",
       },
       dom.div(
         {
           className: "boxmodel-properties-header",
           onDoubleClick: this.onToggleExpander,
         },
-        dom.div(
+        dom.span(
           {
             className: "boxmodel-properties-expander theme-twisty",
             open: this.state.isOpen,
             onClick: this.onToggleExpander,
           }
         ),
-        dom.span(
-          {
-            className: "boxmodel-properties-label",
-            title: BOXMODEL_L10N.getStr("boxmodel.propertiesLabel"),
-          },
-          BOXMODEL_L10N.getStr("boxmodel.propertiesLabel")
-        )
+        BOXMODEL_L10N.getStr("boxmodel.propertiesLabel")
       ),
       dom.div(
         {
           className: "boxmodel-properties-wrapper",
           hidden: !this.state.isOpen,
           tabIndex: 0,
         },
         properties

--- a/devtools/client/inspector/grids/components/GridDisplaySettings.js
+++ b/devtools/client/inspector/grids/components/GridDisplaySettings.js
@@ -51,31 +51,35 @@ module.exports = createClass({
       },
       dom.span(
         {},
         getStr("layout.gridDisplaySettings")
       ),
       dom.ul(
         {},
         dom.li(
-          {},
+          {
+            className: "grid-settings-item"
+          },
           dom.label(
             {},
             dom.input(
               {
                 type: "checkbox",
                 checked: highlighterSettings.showInfiniteLines,
                 onChange: this.onShowInfiniteLinesCheckboxClick,
               }
             ),
             getStr("layout.extendGridLinesInfinitely")
           )
         ),
         dom.li(
-          {},
+          {
+            className: "grid-settings-item"
+          },
           dom.label(
             {},
             dom.input(
               {
                 type: "checkbox",
                 checked: highlighterSettings.showGridLineNumbers,
                 onChange: this.onShowGridLineNumbersCheckboxClick,
               }

--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -111,19 +111,17 @@ module.exports = createClass({
       grid,
       onHideBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       setSelectedNode,
     } = this.props;
     let { nodeFront } = grid;
 
     return dom.li(
-      {
-        className: "grid-item",
-      },
+      {},
       dom.label(
         {},
         dom.input(
           {
             type: "checkbox",
             value: grid.id,
             checked: grid.highlighted,
             onChange: this.onGridCheckboxClick,

--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -47,16 +47,17 @@ const App = createClass({
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     return dom.div(
       {
         id: "layout-container",
+        className: "devtools-monospace"
       },
       Accordion({
         items: [
           {
             header: BOXMODEL_L10N.getStr("boxmodel.title"),
             component: BoxModel,
             componentProps: this.props,
             opened: true,

--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -3,16 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/ */
 
 /**
  * This is the stylesheet of the Box Model view implemented in the layout panel.
  */
 
 .boxmodel-container {
   overflow: auto;
+  padding-bottom: 4px;
 }
 
 /* Header */
 
 .boxmodel-header,
 .boxmodel-info {
   display: flex;
   align-items: center;
@@ -107,17 +108,18 @@
   position: absolute;
   pointer-events: none;
   margin: 0;
   text-align: center;
 }
 
 .boxmodel-main > p > span,
 .boxmodel-main > p > input,
-.boxmodel-content {
+.boxmodel-content,
+.boxmodel-size > span {
   vertical-align: middle;
   pointer-events: auto;
 }
 
 /* Coordinates for the region sizes */
 
 .boxmodel-top,
 .boxmodel-bottom {
@@ -309,22 +311,26 @@
 .boxmodel-position-group {
   display: flex;
   align-items: center;
 }
 
 /* Box Model Properties: contains a list of relevant box model properties */
 
 .boxmodel-properties-header {
-  display: flex;
-  padding: 2px 0;
+  padding: 2px 3px;
 }
 
-.boxmodel-properties-wrapper {
-  padding: 0 9px;
+.boxmodel-properties-expander {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.boxmodel-properties-wrapper .property-view {
+  padding-inline-start: 17px;
 }
 
 .boxmodel-properties-wrapper .property-name-container {
   flex: 1;
 }
 
 .boxmodel-properties-wrapper .property-value-container {
   flex: 1;

--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -11,52 +11,80 @@
 
 /**
  * Common styles for shared components
  */
 
 .grid-container {
   display: flex;
   flex-direction: column;
-  flex: 1;
+  flex: 1 auto;
   align-items: center;
+  min-width: 140px;
 }
 
 .grid-container > span {
-  font-weight: bold;
-  margin-bottom: 3px;
+  font-weight: 600;
+  margin-bottom: 5px;
+  pointer-events: none;
 }
 
 .grid-container > ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .grid-container li {
+  display: flex;
+  align-items: center;
   padding: 4px 0;
 }
 
+.grid-container input {
+  margin: 0 5px;
+}
+
+.grid-container label {
+  display: flex;
+  align-items: center;
+}
+
 /**
  * Grid Container
  */
 
 #layout-grid-container {
   display: flex;
   flex-direction: column;
   margin: 5px;
 }
 
 /**
+ * Grid Outline
+ */
+
+.grid-outline {
+  margin-top: 10px;
+  overflow: visible;
+}
+
+/**
  * Grid Content
  */
 
 .grid-content {
   display: flex;
+  flex-wrap: wrap;
   flex: 1;
+  margin-top: 10px;
+}
+
+.grid-container:first-child {
+  margin-bottom: 10px;
 }
 
 /**
  * Grid Outline
  */
 
 #grid-outline {
   margin: 5px auto;
@@ -92,29 +120,28 @@
   text-align: center;
   padding: 0.5em;
 }
 
 /**
  * Grid Item
  */
 
-.grid-item {
-  display: flex;
-  align-items: center;
-}
-
-.grid-item input {
-  margin: 0 5px;
-}
-
 .grid-color-swatch {
   width: 12px;
   height: 12px;
   margin-left: 5px;
   border: 1px solid var(--theme-highlight-gray);
   border-radius: 50%;
   cursor: pointer;
 }
 
 .grid-color-value {
   display: none;
 }
+
+/**
+ * Settings Item
+ */
+
+.grid-settings-item label {
+  line-height: 16px;
+}