>>>>I am learning how to determine values of the properties and attributes on a web page. For example, when I am looking at a sample page (I found online) (I am using IE 9) I press F12 to see developer tools. When I click the pointer to an element (e.g. Input) I see on the HTML side the properties set for this element (e.g. name, size, type, maxlength). But no information on the font-size or other attributes. The Style side (right side) show very little information:
>>>>

>>>>inherited - table
>>>>   inline -style
>>>>      border-collapse: collapse
>>>>

>>>>My goal is determine what defines this particular Input physical size (height). Is the height of an Input element defined by font size? If so, how do you find what font-size is set for this Input?
>>>
>>>In IE10 (not sure whether IE9 is the same) there's a 'Trace Styles' tab which shows the HTML hierarchy for the element which makes it easier to determine what is inherited and from where (strike thru indicates a css setting that has been overridden). You can also uncheck the attribute at any level to see how that affects the layout.
>>>
>>>But in many ways I prefer the Chrome Developer tools for this sort of thing
>>
>>The IE has Trace Styles tab but I am not sure it shows me what I am looking for. I also have Chrome browser and will try it. I also have FF and try in that browser too. Hopefully at least one of these tools will get me to my goal. Thank you!
>
>All three do the same thing in different ways. TBH allthough I like Chrome best for debugging javascript I think IE is better for analysing style sheets. Best just poke around but bear in mind that elements can inherit from parent elements and can also have inherited attributes overridden by any page-specific css files.

This is the tough part for me - to track up the inheritance ladder to how this or that element got the value of properties and attributes. I am working on it.