Intro to the Box Model

An overview of the Box Model & how it is used in web design.
The term "Box Model" is essentially that every component on a web page is naturally surrounded by a box. For example, the image below shows a page with six elements, a Body, two DivBlocks, an Image, a Heading & a Paragraph. We have put borders around the boxes, to highlight that each element is a box.
Notice that each box naturally sits takes up the entire width of its containing box & is the height of the box conforms naturally to the contents of the box.
In this tutorial we are going to learn:
  1. 1.
    How to use the box model in responsive design
  2. 2.
    Grouping boxes
  3. 3.
    Nested boxes
  4. 4.
    Margin, border & padding

How to use the box model in responsive design

Web content is not like content is not supposed to be set out like a Powerpoint or Figma file, where components can be manually dragged & dropped anywhere on the page. Powerpoint & Figma files are not responsive & their content is only intended run on one resolution.
Conversely, content for the web behaves more like a Word file, where content flows naturally from the top left of the page, wrapping where ever it hits the edge of the document or the edge of another component.
We call this responsive design, because the content will conform to different resolutions, for example, you can design & view your app on any device (mobile, tablet or browser).

Grouping Boxes

An important idea in the box model is that boxes can live inside other boxes. For example, every page will have a body component (which is a box), inside the body we might put a div block component (which is a box) & inside that div block component we might put a heading & paragraph component which are both boxes.

Nested Boxes

An important property of the box model is that components will always expand to fill the height of their containing box. For example, if we have an image & we add it to a big box, that image will expand to the height of that large box. The image will also maintain its aspect ratio, so that it will expand horizontally as well. Similarly, if we add that image to a smaller box, it will only expand to fill the height of that smaller box.
An example of this is shown in the GIF below, where we have an image inside a container. As we shrink the container size, the image size re-adjusts to fit the size of the container.
To add spacing between boxes, we next need to understand Margin, Borders & Padding.

Margin, Border & Padding

As we read above, every component on a website, header, body, paragraph, videos, images etc. are boxes. At a low level, each box is made up of four main layers, shown below.
  1. 1.
    Content: the content of the box where your apps text & images are placed.
  2. 2.
    Padding: Clears an area around the content. The padding is transparent.
  3. 3.
    Border: a border that goes around the padding & the content.
  4. 4.
    Margin: clears an area outside the border.
You can control the width of the margin, border & padding layers. For example, if we look at the following inside the Dittofi platform. We can click on a component on the page builder & use the margin option inside the styles panel to add margin to the component. Notice here that the yellow box is increasing in size, because we are adding margin to the outside of the red box.
Similarly we can use the same box to add transparent padding to our box. Notice, the red box here is growing inside, since we are adding padding to the inside of the box.
And lastly, we can add a border to our box. We can control the width & shape of this border.

Page Layouts

With what you've learnt so far, you are able to stack boxes on top of each other in order to build out a basic website. You can also add margin, padding & borders to the website so as to get the positioning better looking.
This is great to start with, however, if you want to have some boxes set out horizontally, some vertically or even to go diagonally across the page, you need to understand some different layout techniques.