User stories & information architecture

"parent element"; "children elements"

"brother element"; "sister elements"

"mother element"; "children elements"

"team element"; "member elements"

Create space inside a box

Create space between boxes

Create borders around an element

Remove padding

On the top left of the canvas

On the top right of the canvas

Exactly where you dropped it

In the middle of the canvas

Margin

Border

Padding

Size

Box's border and its contents

Border and outside elements

Text and outside elements

Different lines of text

They behave like they're in a slideshow. Each box is positioned where you drop it on the slide

They behave like a deck of cards. Each box overlaps the other

They behave like a grid. Boxes are arranged in rows and columns

They behave like a text document. Boxes start at the top left and each box wraps to the next line when it reaches the right edge

It helps when creating complex animations

It helps determine the color scheme of a website

It allows for precise control over element sizing and spacing

It helps when optimizing website performance

It controls the font size of elements on different screen sizes

It determines the way we read on a webpage

It enables flexible layouts on different screen sizes

It ensures compatibility with older web browsers

The box model forms the foundation of how elements are laid out and designed on a web page

The box model is a programming language

The box model is the standard way to create animations

The box model is the standard protocol for networking