Understanding Dev Tools limitations

[david78737]

This is a noobie question. It’s been a mystery for some time now to discover which CSS class is setting the height of a div in in a page. When I explore the classes in the Classes pane in Dev Tools I am not able to zero in on the class(s) that establish the height.

I recognize that elements INSIDE a div can cause a div to grow. Padding can do the same making the div taller. But I have a div that has elements inside it but a large area (600 px?) under the next largest div. I’m not seeing what is going on.

Is there a strategy or method to efficiently find out which elements are pushing things around? or controlling the dimensions of elements in the box model?

[kirupa]

That is a great question! One trick I like to do is this add a style rule that looks as follows:

* {
  outline: red2px solid;
}

You can add this directly to the Dev Tools:

What you will see is a red border across all of your elements:

This will make it much easier to see what element or style is causing weird layout issues.