There is no easy way to narrow down which element is causing a parent element to change its height. Depending on the situation, it could be a direct style applied to the parent element, it could be one child, or many of the children combined. Most browsers have tools built-in or available via an Add-on that can help make the task of tracking down the problematic style easier, but not quite "easy."
- Firefox
Use Firebug,Hit F12, make sure you're on the Inspector tab and click on the arrow with a box to the left of the Inspector tab and select the element. Styles will be displayed on the right, and broken down into categories such as directly applied styles, and inherited styles from a parent element.- Internet Explorer
- Hit F12, click on the cursor icon and select the element. It will render a treeview of the directly applied styles and the inherited ones.
- Google Chrome
- Hit F12, the display of the styles will be similar to that of Firebug.
Note that in Firebug, when you have the selection tool enabled, it will outline the element under your cursor showing you on the page the how large the element is (as if you applied a border: 2px solid blue
style to it. It will also highlight the respective element in the HTML inspector so you know exactly which element you're dealing with. While this isn't going to magically say "oh hey, this particular element and style is the one giving you problems" it will help you get a clearer visual on the problem.