The Web Developer Toolbar Display Block Size tool provides size information about block-level page elements to which specific sizing has been applied. This tool provides information about the "visible box" size so that you don't have to spend time adding up width/height, padding, and border values.
On the Web Developer Toolbar, click Information | Display Block Size. The block-level elements which have been assigned to a class or ID become outlined in red. A small yellow tag appears in the upper left corner of each of these element boxes and displays the element type, the class or ID name, and the calculated width and height of the visible box. The tool does correctly display the red outline around the visible portion of the block element which is included in its calculations.
It is important to note that elements which do not have a set content width or height property will return values that may not be useful. The calculations for those elements are simply determined by the current width of the browser window. Calculated heights on these same flexible-width elements may be somewhat more useful depending on whether they include wrapping lines of text or not.
While the Display Block Size tool may be more limited than some of the other Web Developer Tools previously discussed, it can be useful in a narrow range of situations as described above, or for gaining ballpark figures about certain block elements.
It is also important to be aware of the limitations of this tool.