The box model is quite hard for me to explain, but I have embedded several links to resources that have more visual guides to explain how they work! Here are some of the basics.
BOX MODEL
The box model is a way to understand how spacing works for the elements on an HTML page. These include the dimensions (width and height), borders, paddings, and margins of an element's box. Without a visual guide, think of a small rectangle that is encompassed by 3 slightly larger rectangles of increasing sizes. The smallest, innermost rectangle is the content, then as you go up the rectangle sizes, the spaces between are the padding, border, then margin (largest and outermost) rectangle. It is important to play around with the dimensions so that the content of your page doesn't get too crowded as you keep adding more stuff into it.
As it is called the box model, we use CSS to make changes to how the boxes look. You can add a border color as well as radius (thickness) to have it pop out more. Adding padding can space out the border further away from your content in order to not crowd it, you can do this by adding px to either all or any direction. If you decide to write it in a shorthand method but will several directions, you can list out all the paddings in the direction of top, right, bottom, left like: padding: 6px 11px 4px 9px;. There is even shorthand for 3 (top, left & right, bottom) or just 2 (top & bottom, left & right) directions as well. Margins function similarly to padding, except it applies to the space outside the border, and separates content from each other. Margins can also be applied with auto to make the left and right margins become centered.
Something to note about the box model is also setting a minimum and maximum width and height. This is to ensure that reading the content on a page doesn't appear too wonky if you're looking at the same website on a phone or a laptop. Another property you can also add is overflow, and includes hidden, scroll, or visible that affect how content that leaks of their respective box can be viewed.
POSITIONING
In the previous section we talked about the box model, but now we'll talk about how these boxes can be ordered and the positions they can assume. First off, all boxes start in a static position, which is the default position. There are also relative, absolute, fixed, and sticky positions as well, which can be played around with for different results. Admittedly, these are a bit hard to explain by text without any visuals, so I will hyperlink each position to its corresponding Codecademy link above.
To add a bit more to the relative position, you can also add a z-index as well. If that is unfamiliar term, let's think about a cheeseburger. It has a bottom bun (z-index = 0), burger (z-index = 1), cheese (z-index = 2), top bun (z-index = 3). Now look at the burger from a bird's eye view, bottom bun on the table, you'll only see the top bun right? Z-index's can be thought of as layers, and having a higher index gives it more visibility than a box or object that has a lower z-index.
Float is a property to wrap text around an image, and essentially tries to force whatever it is applied to in the direction it is given. Clear is a property that stops elements from 'bumping' into one another. Again, this needs more of a visual guide, so I will link it once again to Codecademy.
Top comments (0)