The box model

Reference: Block and inline layout in normal flow

The display property and flow layout

The flex container behaves like a block element: it displays on a new line and takes up all of the space it can in the inline direction.

The flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display type of flex, establishing the flex formatting context for the direct children.

Flex Item -
Direct Child

However,

Grand-childern

are in

normal flow.

This is the parent element
(flex container)

Examples of different display types

This is a paragraph. The browser renders this paragraph as a block box, so the paragraph begins on a new line, and expands to the full width available to it, ie, normal flow for a paragraph.

List Item Zero
List Item One
List Item Two
These list are laid out
using display: flex.

In this paragraph some of the words (this span has display: block applied to it) have been wrapped in span elements.

In this next example we see how inline elements behave. The span elements in this paragraph are inline by default, and as such, the span elements do not force line breaks.

This is a <ul> element
set to display: inline-flex
creating an line box
around these flex items.

Here are two paragraphs, both set to display: inline.

The inline flex container and paragraphs all run together on one line rather than breaking onto new lines

Playing with box models

The standard box model
Width = 200px
Height = 100px

The alternate box model
Width = 290px
Height = 190px

Margins

Change the margin values to see how the boxs are pushed around due to the margin creating (or removing space if it is a negative margin) between this element and the containing element.

Right Box

Margin Collapsing

The concept of margin collapsing.

There are a number of rules when margines will, and will not collapse.

Borders & Padding

There are many types of Borders

Dashed

Groove

Ridge

Inset

Outset

Box Model & Inlne Boxes

This is a paragraph with a span inside this paragraph. A span is an inline element, and as such it will not respect the width & height properties.

Using `display: inline-block` & `display: block`

This is a paragraph with a span inside this paragraph. A span is an inline element, and as such it will not respect the width & height properties. display: inline-block

This is a paragraph with a span inside this paragraph. A span is an inline element, and as such it will not respect the width & height properties. display: block