Hi this may be a rubbish question. But I’m learning about box model and I was wondering how a web developer would use the box model. Do you created every element with padding and margin added in css , then do you add all the padding, margin and borders together every time you add a new element. Do they use the box model in the inspect element in chrome if how should I use it? Sorry if it’s a rubbish question just want to a good understanding of how to use it better.
The box model is simply there to help you understand that they are applied the same way to every element. Margins go on the outside of the element, padding goes on the inside of the element, between the edge of the element, and the content within the element.
I like this page which describes the box models and some of the gotchas pretty well…
Margin and padding will be applied where and when needed, not necessarily to everything.
It is quite common to apply styles to classes, then add classes to elements that need them, rather than assigning css to every element.
You can give a class to any number of elements that share styling characteristics.
Thanks for your reply. What is the need to know what width + padding + margin + border. Couldn’t you just see on the screen if it the layout is correct. Should add them all together every time i add an element.
There is no definitive answer, cases vary too much.
If you need padding, add padding. If you need a margin, add a margin. If you don’t, then don’t.
One method is to reset them all to 0 to clear defaults, then add as needed.
But as the possibilities in html and css are so endless, you can’t give one answer to everything, only to a specific scenario.
Thanks for help. Just think I’m thinking about my layout to much.I’m trying to workout the best way to to layout a webpage so I don’t have alot of mistake or rubbish code. Also I think im doing a bit of trial and error too much at moment .
Why don’t you draw a diagram of the layout first, placing all the elements where you want them. Then label on the diagram all the widths of the elements, and any padding, borders and margins you use. The point of this is to make sure that, for example, if you are working in percents, that the total width of everything does not exceed 100%.