CSS Box Model and Positioning Examples

Tab through the content below, and view the source code and CSS for the examples.

 Back to bootcamp-coders

The CSS Box Model.

This is what MDN has to say about the CSS Box Model: CSS Box Model

margin
border
padding
content

Let's play around with CSS Positioning!

Here's a great tutorial on CSS positioning! learnlayout.com: Learn CSS Positioning.

This is the container.
Box 1
Box 2
Box 3
Box 4

Let's play around with CSS Floats!

This is the container.
Box 1

Sriracha Pitchfork hashtag, listicle readymade semiotics cray. Plaid Marfa viral pop-up. Dreamcatcher Pinterest Pitchfork, gentrify craft beer pickled authentic Kickstarter sustainable twee iPhone migas skateboard yr squid. Salvia hella raw denim, asymmetrical swag sartorial yr.

Box 2
Box 3
Box 4

What the heck is a flexbox?!

Take a look at the CSS Tricks Flexbox Tutorial.

Item One
Item Two
Item Three
Item Four
Item Five