DIGI 220 - CSS Layouts Part 1: Basic Boxes

VIU Media Studies Department - Robin Davies

Lecture Overview

  • The Box Model
  • padding
  • margin
  • border
  • Element height & width

Important Terms

Normal flow
The left-to-right, top-to-bottom rendering of text in Western languages and the familiar, default layout for documents
Nonreplaced elements
An element whose content is contained within the document
Replaced element
An element that serves as a placeholder for something else, such as the img element

Structuring Documents for CSS

  • To prepare for CSS layout, we need a document framework. Create and name div elements to divide your page into logical structures: #menu, #content, #calendar, #footer, #header

    You could also use HTML 5 block-level elements (header, nav, section...)

  • Note: Put your structures in an order which makes sense even if CSS is not applied.
  • Note: Use comments to clarify the purpose of various HTML sections, and to specify what CSS rules style those sections.

CSS Boxes - Setting the Stage

  • CSS can control both the appearance and position of each element's box within the DOM
  • Most boxes are either inline or block-level
  • By default, elements are displayed in their HTML order, from top to bottom
  • "Line breaks" are inserted at the beginning and end of each block-level element's box (via default CSS)

CSS Boxes - Content Area

  • In CSS, each element fits inside a rectangular box - called the content area or containing block - of its parent element
  • Each element's content area is surrounded by three more areas:
    • padding
    • border
    • margin

The Standard CSS2 Box Model

Padding, Borders & Margin

  • Padding: transparent - the element's background will show through
  • Border: not transparent - though the element's background will show through any gaps in the border
  • Margin: transparent - the background of the parent element will show through
  • Everything from the outside edge of the border inward is commonly referred to as the visible element box
  • The area that includes the margin is commonly referred to as the full element box, or just the element box

Sizing Boxes

	p { width: 50%; }
  • We set the width of an element's content area using the width property.
  • If padding, borders or margins are not applied, the element's content will touch the sides of its box.
  • Padding adds to the size of the element box, but does not change the size of the content area; the element takes up more space in the browser window as padding is added.
  • Likewise, Borders and Margins add to the size of an element's box, but not its content.

The Sized Box I

If we set an element's width to 500px, add 10px of padding, 5px of border and 20px of margin to all sides, what will the full size of the element box be?

The Sized Box II

Box Model Recap

Dimensioned boxes (width specified) expand to occupy more horizontal space as Padding, Borders and Margins are applied. The width property sets the width of the content area, not the full element box.

Note: CSS 3 has a box-sizing property which changes this default behaviour a little.

Borders I

  • We can set border properties (width, style, color, radius...) for most elements
  • These can all be set for specific borders, or for all four borders at once
border-style: solid;
border-width: 2px;
border-color: #000;
border-radius: 100%;

border-right-style: dotted;
border-style: dotted;

See examples here.

Borders II

There is a short-cut border property for all borders, and shortcut properties for each side of the content:

	border: 1px dotted #0F0;
	border-right: 5px dashed #0F0;
  • Note: The default color for a border is the element's color value
  • Note: You must define at least the style for a border to display - no style, no border!
  • Note: Borders can also be applied to inline elements
  • Note: Borders are not inherited.

Borders III

Individual border properties (e.g. border-width) can have from one to four values applied:

border-width: 2px;
All borders 2px
border-width: 2px 5px;
Top & bottom 2px, right & left 5px
border-width: 2px 5px 1px;
Top-2px, right & left-5px, bottom-1px
border-width: 2px 5px 1px 10px;
Top-2px, right-5px, bottom-1px, left-10px

Padding

  • Padding is extra space around the content area, inside the border
  • We can set the padding for the whole element:
    • padding: 10px;
  • Or specific sides:
    • padding-right: 10px;
  • You can set a padding's width, but not its color or style - padding is always transparent.
  • Note: Padding shortcuts work the same way as border shortcuts.
  • Note: Padding can also be applied to inline elements
  • Note: Padding is not inherited

Margin

  • The margin is the transparent space between an element's visible area (content area + padding + borders) and the edge of the parent element
    • margin: 10px;
    • margin-right: 2em;
  • Note: Margin shortcuts work the same way as padding and border shortcuts

Collapsing Margins

  • Margins appear outside of the padding & border
  • If one element is above a second element, only the larger of the two margins between the elements is used; the smaller (or equal value) margin collapses.
  • Left and right margins don't collapse
  • Top and Bottom margins are not rendered on inline content
  • Note: Margins do not inherit
  • Example

Width & Height

  • You can set the width and height of most elements
    • width: 100px;
    • height: 50px;
  • If you don't explicitly set width, auto is used
  • Note: Specifying the width/height sets the width/height of the content area exclusive of any size in padding or borders.
  • Note: Percent values for the width/height of an element are calculated based on the dimensions of the parent element.
  • Note: Width and height are not inherited

Examples

Layout recipes using display, padding, border, margin, and list-style-type properties

Columns with margins.