In today's guide I"m going to cover the fundamentals about what the CSS box model is, the different types of box modules available to you and how an element block type can affect how the browser will render it on a page. Understanding how box models are rendered is really important in order to become a CSS ninja. If you don't understand how elements render, you will literally waste hundreds of hours pulling out your hair trying to understand why the element you're trying to render isn't behaving as you thought it should be. If you want to learn how to avoid all this frustration, then read on.
In CSS the box model will determine how an element is rendered. As you can see in the diagram below, in order to render out a box a browser must take into consideration several properties.
Let's drill into each part:
Tip: In Chrome, load any webpage, open the developer tools and select the 'computed' tab. You should be able to see the box model details of every element on a page. This can be useful when debugging style issues.
When the browser figures out how to render an element, it needs to figure out the total width and the total height. That is figured out using this formula:Total Width: Right border + right padding + width + left padding + left border
Total Height: Top border + top padding + height + . bottom padding + bottom border
Using the formula above you, hopefully, understand the basics of how a browser calculates the width and heights of the element in order to render it to the screen. It's probably also worth noting that, if no explicit height or width properties are defined for an element, the visual formatting model will take the content with the box to determine its size.
Like most things invented by a developer, this default behaviour can be changed and you can explicitly set how the browser determines widths and heights.
There are two main ways you can change how the browser renders a block. First, you can use the CSS box-sizing property. If you set the box-sizing property on an element you can tell the browser how it should calculate the height and the width:
The other way is to completely change the box type...
There are several different types of boxes that we can use within CSS. The type of box that the browser should use to render out a property is determined by the 'display' property like, 'display: block'. Below lists the main types available to you:
Block-level boxes: Elements are formatted visual as a block. By default, a block will display vertically, one after another. To tell a browser to render an element as a block-type you will need to set the display property as either block, flex, list-item, and table can be used. Blocks will always occupy as much space as possible and will always take up 100% of the parent's width.Like font-size and padding, when a browser loads a page if no explicit values for the display are set then a default value will be assigned. The display property is another one of these mandatory properties that if not explicitly set, the browser will use a default value. HTML elements like paragraphs and divs will all be given a default display property of block unless you set it differently.
Inline Boxes: Inline blocks work in the opposite way than a block-level box. Inline blocks will not add any line-breaks, so they will render on the same line, one after another. Inline blocks live happily with their block level parent element. Inline blocks will only work with left and right padding and will emit any vertical, or, horizontal padding/margins you apply. To set an element as an inline-block, you can use 'display: inline;'
Inline Block-level boxes: Inline-blocks are a bit of a mix and match from a block and an inline-block. In inline-blocks, the outside of the box works like an inline box, so the box only occupies the content space it's assigned and no line-breaks are applied to them. Inside the box, the box works the same as a block-level block, so the box model is applied. This means you can use full padding and margins however you want to.
After you have decided the display box model that is appropriate for your needs, it is also highly likely you will want to position it on the page. There are three main positioning techniques available which are set using either the position property or, via floats:Normal: The default positioning scheme is the relative scheme, set by using display: relative. This is the default value the browser will set unless you explicitly tell it to use something else. Relative flows are not floated, they are displayed in their natural order as defined in the HTML
Floats: The float CSS property specifies that an element should be placed along the left or right side of its container. When you try to position a box with a float, text and inline elements will wrap around the floated element. The parent container will not adjust its height to the element.
Absolute: No impact on the surrounding elements and can even overlap other elements if you want to. When you use an absolute positioning schema, you use the top, bottom, left and right properties to explicitly position the element, based on the offset position of the elements relatively position container.
Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge