On inspecting a html page I see different values being shown in "Computed" section and "Layout" section for a DIV element. Why is it so?

On inspecting a html page I see different values being shown in "Computed" section and "Layout" section for a DIV element. Why is it so.

Computed Section

Q1 - In above: I am thinking, 100 is width and 0 is height. Is that right?

Layout Section:

In layout section it show both height and width as 100px.

Q2 - how can the values differ in these two sections. And which wins.

Q3 - the height and width are in dull color, does it imply that these values are inherited from parent element.

I can see that the box-sizing attribute of this element is "border-box" from your pictures. And the 100px height in the layout means content height + padding top + padding bottom = 100px. And from the computed section we can see the padding bottom is 100px, so its content height will be computed into 0px. We can infer that its CSS source code is like:

div {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  padding-bottom: 100px;
}

Wish my answer is understandable.