diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 5fe0bc8816..03fc88251a 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -53,7 +53,7 @@ export default function ElementView({ index, style }: Props) {
       onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window
-        paddingLeft: `${depth - baseDepth}.25rem`,
+        paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
       }}
     >
       <span className={styles.Component}>
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index c33c4c1d80..28e9b73e7a 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -4,7 +4,7 @@
 }
 
 .HooksNode {
-  padding-left: 1rem;
+  padding-left: 0.75rem;
 }
 
 .NameValueRow {
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index 9020a0afa4..0008e1ada2 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -25,5 +25,5 @@
 .Empty {
   color: var(--color-dimmer);
   font-style: italic;
-  padding-left: 1rem;
+  padding-left: 0.75rem;
 }
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 84a0f0a632..c83e6b8418 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -55,6 +55,8 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
     dataType === 'boolean' ||
     value == null;
 
+  const paddingLeft = `${depth * 0.75}rem`;
+
   let children = null;
   if (isSimpleType) {
     let displayValue = value;
@@ -65,22 +67,14 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
     }
 
     children = (
-      <div
-        key="root"
-        className={styles.Item}
-        style={{ paddingLeft: `${depth}rem` }}
-      >
+      <div key="root" className={styles.Item} style={{ paddingLeft }}>
         <span className={styles.Name}>{name}</span>:{' '}
         <span className={styles.Value}>{displayValue}</span>
       </div>
     );
   } else if (value.hasOwnProperty(meta.type)) {
     children = (
-      <div
-        key="root"
-        className={styles.Item}
-        style={{ paddingLeft: `${depth}rem` }}
-      >
+      <div key="root" className={styles.Item} style={{ paddingLeft }}>
         <span className={styles.Name}>{name}</span>:{' '}
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
       </div>
@@ -99,7 +93,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         <div
           key={`${depth}-root`}
           className={styles.Item}
-          style={{ paddingLeft: `${depth}rem` }}
+          style={{ paddingLeft }}
         >
           <span className={styles.Name}>{name}</span>: <span>Array</span>
         </div>
@@ -112,7 +106,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         <div
           key={`${depth}-root`}
           className={styles.Item}
-          style={{ paddingLeft: `${depth}rem` }}
+          style={{ paddingLeft }}
         >
           <span className={styles.Name}>{name}</span>: <span>Object</span>
         </div>
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index baa4438d7f..d68ec7229a 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -58,7 +58,7 @@
 }
 
 .Owner {
-  padding-left: 1rem;
+  padding-left: 0.75rem;
   cursor: pointer;
 }