>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