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.
What Is The Box Model?
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:
- Blue: Content (text and images, etc..)
- Green: space inside the box, this is the internal whitespace within an element.
- Light Orange: Border.
- Dark Orange: space outside of the box, this is the internal white space around an element.
- Dotted Line: Fill area. The area that gets filled with a background color, or, image.
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.
How Are Heights And Widths Calculated?
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
Do I Have To Use The Default Box Model Rendering Renderer?
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:
- content-box excludes the border and padding properties
- border-box includes content, padding, and borders
The other way is to completely change the box type...
Block-Level Boxes, Inline Boxes & Inline-Block Boxes
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.
How Do You Position Boxes?
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.