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

Experience is key here. But there's a couple of things that helped me, I'll try to tell you about them. The first and biggest help for me was the box-sizing property: https://css-tricks.com/box-sizing/

What does it do? It just makes the browser think like you do. If you set width: 200px; the width will be 200 pixels, if you add padding, it will grow inwards.

Second, Positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning/

position: static; elements just sit in the page and behave "normally".

position: relative; just like static, but child elements with position: absolute will have the values relative to their first parent with position: relative;

position: absolute; This will take the elements out of the normal flow of the page. This means that the width of an empty absolute element will be 0.

Third, Floats: https://css-tricks.com/all-about-floats/ Floats will reduce the width of block elements to the width of its contents and will make them float one next to each other. If you find that the parent of floating elements doesn't have any height, it means you need to clear those floats. I usually just add overflow: hidden; for that.

Fourth - display: https://css-tricks.com/almanac/properties/d/display/ display:inline; The elements will be stacked one next to each other. The margin and padding added to inline elements will not work.

display: inline-block; like inline but the margins and the paddings DO work

display: block; it's the one you're probably most used to. Elements stack one over the other, padding and margins work.

(note on the display property ie7 mixes them up a bit so be aware of that)

Overall, I'd say that the "click" for me was really the box-sizing thing. Try it out!

Other than that, even experienced front end developers find themselves scratching their head every now and then, and when it happens the only thing left to do is the good old inspector.

Hope this helps.

EDIT after reading TreeTree's answer. Always use a css reset when working on the front end to remove browser inconsistencies. A good one is Eric Meyer's css reset: http://meyerweb.com/eric/tools/css/reset/ or start your project using a boilerplate http://www.initializr.com/

Answer 2

In my experience a good reason for different sizes across browsers is due to the browser's default stylesheet for those elements. I find this especially noticeable in form elements. The default style for an text input can vary between browsers in terms of margin, padding, and border size.

box-sizing:border-box would be a good way to solve such issues because it would ensure the final width of the element is what you defined it to be.

A reset stylesheet would be another good way to remove these little differences because it explicitly sets all the styles to be some "normal" format.

Answer 3

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.