One of the biggest ideas to learn and grasp about building a web page is positioning. If you do not position your elements correctly the page will not display correctly. Without proper positioning your elements can overlap or be completely cut off. Text may not appear right or bleed into other elements. This is why understanding positioning is crucial for building a web site. To understand positioning we need to understand the box model layout.


This picture of the box model will help to understand how an element is laid out in HTML. Always keep this model in mind when inputting elements into your web page. You can set numbers to all of these parts of the Box Model. Margins, padding, and borders by default are all set to 0. This means that the all three will be right around the element block of the box model.

Every block element has a width and a height. The height will always follow the height of what is put in the element part of the box model unless otherwise specified. For example if you are putting text into the element and its 48px high then the height of the element part will be 48px. Width is always set at 100% unless other wise specified by a number or percentage. What you must understand is that if you give margins, borders, or padding and number then this is added to the lenght of the width of the element block. For example, if you have the statement p {width: 600px, padding: 5px} the total horizontal pixels width will be 610 since this puts padding on both sides of the width. The same would happen if you added margins or borders.

This is just a short snippet of what positioning means in building great websites. Understanding the box model will help you improve your designs. It is one of the most important aspects of web design that you should try to understand in depth. For more information check out the link below.