CSS Positioning

Topic Overview

Sizing

Basic Layout The Box Model Boxing Sizing Min and Max Values TODO

Overflow

Dealing with Spills Overflow in Practice TODO

Borders

Drawing Edges Properties Radius Borders in Practice TODO

Padding

Giving Some Cushion Padding in Practice TODO

Margin

Adding Separation Margins in Practice TODO

Display

What You See... Properties Display In Practice TODO

Hidden

...And What You Don't Hiding in Practice TODO

Position

Placement on the Page Normal Position Relative Position Absolute Position Fixed Position Positioning in Practice TODO

Z-Index

The Z-Index and Layering Z-Index in Practice TODO

Float

Floating Clearing Float Float in Practice TODO

Padding in Practice

The following example shows two boxes; one with no padding, and one with padding.

Notice that the padding creates space between the text and the box border/edge. Since the padding is set to 2em, the size of padding is the same as the width of 2 ‘m’s.

Padding as Size Control

You can also use the padding property to get elements to be shown without containing content. This is the second method we have to control the size of boxes.

In the following example, notice the two different methods of specifying padding: ems, and percentage, respectively.