General way to know why an HTML element has the size that it does

Question

I'm an experienced web developer. I've spent years working on web applications, but 90% of my work has been on the backend, using Python and Django. Recently I'm trying to improve my frontend chops, i.e. HTML, CSS and JavaScript.

A common problem I run into is this: I'm writing an HTML page, loading it in Chrome, and one of the elements is not sized or positioned like I want to. Maybe it's too wide, maybe it's too narrow, maybe too much to the right, maybe too much to the left, etc. Since I'm not an expert on HTML and CSS, and I haven't memorized all the arcane little rules that can determine size and position of elements, this happens often and it's really frustrating.

When that happens I need to find out why that element has a wrong position/size so I could fix that. What I want is a general way to find out why a certain element in my web page has the size and position that it does. I'm expecting an answer like "Element X has a width of 300px because it has the property width: 300px;" or "Element Y has a width of 380px because it's contained inside Element Z, which has a width of 400px and a padding of 10px." Of course, it doesn't need to be this verbose, but I need to get that information.

Now, I'm familiar with Chrome dev tools. I use them all the time. They're great. But I don't see how they answer this question for me. They can help, but I still find myself having to investigate each case separately, which can take hours without results. (This just happened today which is why I'm taking the time to write this question.)

Is there a way to always know why an HTML element has the size and position that it does?

Answer 1

Sorry to say this but there is not any short cut to identify such thing. Consider how we / any developer too identify the requirement you have in your mind and what you have design or developed.

Suggestion : Best way to identify is to learn basics of HTML & CSS. And you can also use some great life saving tools of mozila like developer tool & firebug.