--- a/devtools/client/inspector/components/box-model.js
+++ b/devtools/client/inspector/components/box-model.js
@@ -227,44 +227,50 @@ BoxModelView.prototype = {
       this.onFilterComputedView);
 
     this.onPickerStarted = this.onPickerStarted.bind(this);
     this.onMarkupViewLeave = this.onMarkupViewLeave.bind(this);
     this.onMarkupViewNodeHover = this.onMarkupViewNodeHover.bind(this);
     this.onWillNavigate = this.onWillNavigate.bind(this);
 
     this.onKeyDown = this.onKeyDown.bind(this);
+    this.onLevelClick = this.onLevelClick.bind(this);
+    this.setAriaActive = this.setAriaActive.bind(this);
     this.moveLevelFocus = this.moveLevelFocus.bind(this);
     this.makeFocusable = this.makeFocusable.bind(this);
     this.makeUnfocasable = this.makeUnfocasable.bind(this);
     this.wrapFocus = this.wrapFocus.bind(this);
     this.onFocus = this.onFocus.bind(this);
 
     this.boxModel = this.doc.getElementById("boxmodel-wrapper");
     this.boxModel.addEventListener("keydown", this.onKeyDown, true);
     this.boxModel.addEventListener("focus", this.onFocus, true);
     this.marginLayout = this.doc.getElementById("boxmodel-margins");
+    this.marginLayout.addEventListener("click", this.onLevelClick, true);
     this.borderLayout = this.doc.getElementById("boxmodel-borders");
     this.paddingLayout = this.doc.getElementById("boxmodel-padding");
 
     this.layouts = {
       "margin": new Map([
         [KeyEvent.DOM_VK_ESCAPE, this.marginLayout],
         [KeyEvent.DOM_VK_DOWN, this.borderLayout],
-        [KeyEvent.DOM_VK_UP, null]
+        [KeyEvent.DOM_VK_UP, null],
+        ["click", this.marginLayout]
       ]),
       "border": new Map([
         [KeyEvent.DOM_VK_ESCAPE, this.borderLayout],
         [KeyEvent.DOM_VK_DOWN, this.paddingLayout],
-        [KeyEvent.DOM_VK_UP, this.marginLayout]
+        [KeyEvent.DOM_VK_UP, this.marginLayout],
+        ["click", this.borderLayout]
       ]),
       "padding": new Map([
         [KeyEvent.DOM_VK_ESCAPE, this.paddingLayout],
         [KeyEvent.DOM_VK_DOWN, null],
-        [KeyEvent.DOM_VK_UP, this.borderLayout]
+        [KeyEvent.DOM_VK_UP, this.borderLayout],
+        ["click", this.paddingLayout]
       ])
     };
 
     this.initBoxModelHighlighter();
 
     // Store for the different dimensions of the node.
     // 'selector' refers to the element that holds the value;
     // 'property' is what we are measuring;
@@ -484,16 +490,17 @@ BoxModelView.prototype = {
     let header = this.doc.getElementById("boxmodel-header");
     header.removeEventListener("dblclick", this.onToggleExpander);
 
     let nodeGeometry = this.doc.getElementById("layout-geometry-editor");
     nodeGeometry.removeEventListener("click", this.onGeometryButtonClick);
 
     this.boxModel.removeEventListener("focus", this.onFocus, true);
     this.boxModel.removeEventListener("keydown", this.onKeyDown, true);
+    this.marginLayout.removeEventListener("click", this.onLevelClick, true);
 
     this.inspector.off("picker-started", this.onPickerStarted);
 
     // Inspector Panel will destroy `markup` object on "will-navigate" event,
     // therefore we have to check if it's still available in case BoxModelView
     // is destroyed immediately after.
     if (this.inspector.markup) {
       this.inspector.markup.off("leave", this.onMarkupViewLeave);
@@ -527,21 +534,37 @@ BoxModelView.prototype = {
     }
   },
 
   onFocus: function () {
     let activeDescendant = this.boxModel.getAttribute("aria-activedescendant");
 
     if (!activeDescendant) {
       let nextLayout = this.marginLayout;
-      this.boxModel.setAttribute("aria-activedescendant", nextLayout.id);
-      nextLayout.className = "layout-active-elm";
+      this.setAriaActive(nextLayout);
     }
   },
 
+  setAriaActive: function (nextLayout, level = null, target = null) {
+    this.boxModel.setAttribute("aria-activedescendant", nextLayout.id);
+    if (target && target._editable) {target.blur();}
+    // Remove Current level border outline
+    if (level) {this.doc.getElementById(level).className = ""};
+    // Set the next level's border outline
+    nextLayout.className = "layout-active-elm";
+  },
+
+  onLevelClick: function (event) {
+    let {target} = event;
+    let level = this.boxModel.getAttribute("aria-activedescendant");
+    let nextLayout = this.layouts[target.getAttribute("data-box")].get("click");
+
+    this.setAriaActive(nextLayout, level, target);
+  },
+
   onKeyDown: function (event) {
     let {target, keyCode, shiftKey} = event;
     // If focused on editable value or in editing mode
     let isEditable = target._editable || target.editor;
     let level = this.boxModel.getAttribute("aria-activedescendant");
     let nextLayout;
 
     switch (keyCode) {
@@ -575,22 +598,17 @@ BoxModelView.prototype = {
           event.stopPropagation();
           this.makeUnfocasable(level);
           this.boxModel.focus();
         }
         break;
     }
 
     if (nextLayout) {
-      this.boxModel.setAttribute("aria-activedescendant", nextLayout.id);
-      if (target._editable) {target.blur();}
-      // Remove Current level border outline
-      this.doc.getElementById(level).className = "";
-      // Set the next level's border outline
-      nextLayout.className = "layout-active-elm";
+      this.setAriaActive(nextLayout, level, target);
     }
   },
 
   makeUnfocasable: function (editLevel) {
     let datalevel = this.doc.getElementById(editLevel).getAttribute("data-box");
     let selector = "[data-box='" + datalevel + "']" + ".boxmodel-editable";
     let editBoxes = this.doc.querySelectorAll(selector);