Box Models

These are some cool boxes

Did you know...

You can add a border to boxes?

Even make it curly!!!

OR add a fancy border!!!!!!

How did I make these boxes?

A box model consists of: margins, borders, and padding

Padding - Clears an area around the content. This is transparent.
Border - A border that goes around the padding and content. This can be coloured and styled
Margin - Clears an area outside the border. This is also transparent.

We can also manipulate the border in many ways. This can be its colour, style, radius and width!

Here are some examples on text:

A red dotted border.

A thick dashed border.

An curved inset border.

A mixed border.

Additionally, you can add links onto box models to create buttons. All that is needed is a suitable link embedded into the html when calling the box

By using box models, we can create a dropdown:

This is done by specifying the dropdown-content's style like a box model - it uses the same basics! (Padding, Border, Margin)