Skip to main content

The Box Model

The Visual Formatting Model in CSS is a fundamental concept that describes how webf and browser process and display document content. It encompasses the rules and behaviors used to determine the layout of elements on the screen.

The Box Model​

The box model in CSS describes the layout and design properties of elements as rectangular boxes, detailing how they are sized, padded, bordered, and margined. The box model is fundamental to understanding how space is managed and elements are displayed in webf/web design.

Each box in the box model consists of the following components, from the innermost to the outermost:

  1. Content: This is the main content of the box, where text, images, or other media are displayed. The dimensions of the content box can be controlled using the width and height properties.

  2. Padding: This is the space between the content of the box and its border. Padding does not have any color by default, but it will show the background color of the box. You can control padding with properties like padding-top, padding-right, padding-bottom, and padding-left or the shorthand padding.

  3. Border: This is a potentially visible boundary around the padding and content. It can have a style, width, and color. The border is controlled with properties like border-style, border-width, border-color, and their specific variations for each side (e.g., border-top-width).

  4. Margin: This is the outermost layer of the box, and it represents the space between the box's border and the neighboring elements. Margin is transparent and doesn't show any color, not even the background color of the element. You can control the margin with properties like margin-top, margin-right, margin-bottom, and margin-left or the shorthand margin.

The following diagram shows how these areas relate and the terminology used to refer to the various parts of the box:

img

One important concept to understand with the box model is the box-sizing property:

  • content-box: The width and height properties set the size of the content box, not including padding and border.

  • border-box (default for webf): The width and height properties include content, padding, and border, but not the margin.

caution

From now on, WebF only supports the box-sizing: border-box mode. Setting the box-sizing property to content-box will have no effect until WebF is released with content-box support.

Here is a example to show how border-box works with the following styles:

div {
    width: 300px;
    height: 150px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box;
}

With box-sizing: border-box, the actual content area of the div will be:

  • Width: 300px - 10px (left padding) - 10px (right padding) - 5px (left border) - 5px (right border) = 270px
  • Height: 150px - 10px (top padding) - 10px (bottom padding) - 5px (top border) - 5px (bottom border) = 120px

So, the content area will be 270px wide and 120px tall, but the overall dimensions of the div (including padding and border) will remain 300px by 150px.

Types of Boxes​

In CSS, every element generates a box when rendered on the screen. These boxes define the layout and look of elements on the page. The type of box an element generates and its characteristics are primarily determined by the display property of the element.

Here's a detailed look at the various types of boxes that WebF provides:

  1. Block-level Boxes:
  • Generated by block-level elements.
  • Stack vertically, one after another.
  • Occupy the full width of their containing element by default.
  • Respects box model properties: margin, border, padding, width, and height.
  • Examples: <div>, <h1>, <p>, <ul>, <li>, <section>, etc.
  • display values that create block-level boxes: block.
  1. Inline-level Boxes:
  • Generated by inline elements.
  • Flow horizontally and only take up as much width as necessary.
  • Do not respect width and height properties.
  • Vertical padding, margin, and border don't affect the flow of other inline elements around them.
  • Examples: <span>, <a>, <strong>, <em>, etc.
  • display values that create inline boxes: inline.
  1. Inline-block Boxes:
  • A hybrid between block and inline boxes.
  • Flow horizontally like inline elements, but respect box model properties like block elements.
  • Useful when you want elements to sit side-by-side but still have block-level styling capabilities.
  • display value: inline-block.
  1. Flex Boxes:
  • Part of the Flexbox layout model, designed to distribute space along a single axis.
  • Allows for flexible layouts and alignments even when sizes are unknown or dynamic.
  • Main container has a display value: flex or inline-flex.
  • Direct children become flex items.
  • More control with properties like justify-content, align-items, etc.
  1. Box Inside Box:
  • CSS layout often involves nesting of boxes. For example, a block box can contain several inline boxes or other block boxes.
  • The behavior of child boxes depends on the type and properties of the parent box.
  1. Replaced vs. Non-replaced Elements:
  • Replaced elements are elements for which the content is outside the scope of the CSS formatting model. Examples include images (<img>) or embedded flutter widgets (customized elements extended by Flutter widgets). Their intrinsic dimensions, aspect ratio, and visual rendering are often used by CSS.
  • Non-replaced elements are elements whose content is inside the document and can be styled using CSS. Examples include a <div> or a <p>.