4

When inspecting the elements with block style here, CDT shows the height property as dimmed: http://s.codepen.io/WhitneyLand/debug/zGpZbN

dimmed height property

The docs say dimmed means inherited property that is not affecting the element, however clearly the height value is inherited, but is affecting the element.

So, how are we supposed to trace the source of a style like this using CDT?

/* full example http://s.codepen.io/WhitneyLand/debug/zGpZbN */
<div class="block block-fixed">
    aaa
</div>
Konrad Dzwinel
  • 36,825
  • 12
  • 98
  • 105
whitneyland
  • 10,632
  • 9
  • 60
  • 68

2 Answers2

3

This is occurring because that height is calculated from the contents of the div. Namely, the 'aaa' text. Adding a font-size: 40px; to the .block-fixed class grows the calculated height to 47px. In this case it's dimmed because it's calculated.

Ryan Joy
  • 3,021
  • 19
  • 20
  • That's not what the docs say dimmed should mean though? http://stackoverflow.com/a/6351378/700206 Also, how are you supposed to derive what you said from CDT, rather than just knowing? – whitneyland Jun 28 '15 at 22:27
  • 1
    @LeeWhitney Docs where just updated: https://github.com/GoogleChrome/devtools-docs/commit/d1903ffc30a80a2801fe3339ac779e96abd66243 – Konrad Dzwinel Jun 29 '15 at 18:25
1

The height you are seeing is a computed style property (computed via the browser's rendering engine), not a declared/inherited one. You'll notice when you hover over the total element in the DOM inspector, the "height" of the div is 19px - 18px tall and 1px bottom border.

Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
  • 1
    Read closer - inherited properties are only displayed in a dimmed font **when the show inherited box is checked** - the `height` property displays in a dimmed font without that box being checked. In addition to all that, nowhere in your CSS is a height of 18px being applied, so it can't be `inherited`. It's a computed property (by the browser) that hasn't been specified in CSS. – Adam Jenkins Jun 28 '15 at 23:08
  • 1
    I will concede that nowhere in the dev tool docs (that I have come across) explain this behaviour, but there's nothing else it could possibly mean, so it's a pretty straightforward inference. – Adam Jenkins Jun 28 '15 at 23:11
  • CSS is tough for me with precise tool documentation. I think reading the entire spec end to end would help solidify it. – whitneyland Jun 28 '15 at 23:37
  • 1
    Reading the entire CSS spec will help you very little - having a basic understanding, and then using it and seeing how it works with your own eyes will solidify it far better. – Adam Jenkins Jun 29 '15 at 00:37
  • 3
    I updated the docs to help clarify this. please pull-request if this isnt' good enough: https://github.com/GoogleChrome/devtools-docs/commit/d1903ffc30a80a2801fe3339ac779e96abd66243 – Paul Irish Jun 29 '15 at 17:23