Happy Valentine's Day to the box model

 

everything is a box?
The box model = CSS treats every element as if its represented by a box.
All elements: paragraphs, headings, block quotes, lists, list items. Even inline items like strong, em and links are treated as boxes.

I like this…this I understand.
Parents and siblings, still a bit of challenge, but the box model… I like.
Every box is made up of content area (Well, yeah) along with optional padding, border and margins.

Content area is surrounded by optional transparent padding (Barb calls it bubble wrap).
An optional border can be placed around the padding (lets call that tissue paper around the bubble wrap).
An optional transparent margin can be placed around everything ( extra crumpled up newspaper between the tissue and the box “content area”).

what’s in the box?
Content area = Every element starts with some content, like text or an image, and this content is placed inside a box that is just big enough to contain the element. Which means there is no whitespace between the content and the edge of the box.

Padding = Any box can have a layer of padding around the content area. Padding is optional, so you aren’t required to have padding but it can be used to create visual whitespace between the content and the border of the box (element). Padding is transparent and without color. Padding can be controlled on every side of the content area, meaning you can set different amounts of padding on each side or style the padding to be uniform.

I like this… imagine the design possibilities.

Border = Elements can have optional borders around them. A border surrounds the padding and creates a line around the padding. This creates visual separation between different parts of content and other elements on a page. Borders can be styled with various widths, colors, and styles (dashes, dotted, inset, etc…).

Margin = Margins are also optional. They surround the border. They give you a way to add space between elements on the same page. Margins are also transparent and have no color.

Imagine the endless amounts of styling you can do to you content, using padding, margins, borders. You can create whitespace… I LOVE whitespace.

Whitespace is the space on a page that is not occupied by any text or graphics. White space is used to

• control eye-flow and guide the reader around the page
• create a symmetry and asymmetry
• creating visual interest and excitement
• give a professional piece a calm, quiet, serious feeling

Whitespace is a design element and should be used consciously.
My design mantra has always been “less is more”. Translation—when you have less clutter and more white space it makes designs friendlier and therefore easier to read and interact with.
Isn’t this our job as designers.
So the box model and I are officially in a relationship… Happy Valentine’s Day to the box .