Chrome dev tools: select an element to inspect it -> Not able to select an element which does not have any whitespace between itself and the child

Consider this:

.parent {
  height: 100px;
  margin-bottom: 40px;
}

.child {
  height: 100%;
}

html,
body
 {
  height: 100%;
}

<div class="parent">
  <div class="child">
    Some content
  </div>
</div>

When i use "Select an element by clicking on it" functionality in Chrome Dev Tools, there seems to be no way for me to select the parent element (probably because there is no whitespace/content between itself and the child div). This makes it difficult to see layout issues which are being caused by the margin-bottom of the parent.

Alternatively, I can go through the element in the Elements panel and find the parent, and then I can see the margin-bottom of the parent.

Is there a way to inspect the parent element by selecting it using mouse (may be a key combination that enables selecting the parent of the current selection using the mouse, instead of needing to go to the Elements tab, looking at the structure, going through some possible elements and then figuring out that there is a margin-bottom)