Box Model & Positioning - Part 2

Margin & Padding

Every browser applies a general margin and padding to elements to help with legibility and discourse. The default values for these properties differ from browser to browser and element to element. In lesson one we discussed using aCSS reset to tune all of these default values down to zero. Using a reset allows us to work from a common ground and allows us to specify our own values.

CSS Margin Property

The margin property allows us to set the length of space surrounding an element. Margins fall outside of any border and are completely transparent. Margins can be used to help position elements within a particular place on a page or to simply provide breathing room, keeping all other elements a safe distance away.

div {
  margin: 20px;
}

CSS Padding Property

The padding property is very similar to that of the margin property, however it falls within any elements border. Paddings will also inherit any backgrounds of an element. Padding is used to provide spacing within an element, not for positioning an element like the margin property.

div {
  padding: 20px;
}

Fig. 3.03A box model breakdown using margins for spacing between elements and padding for spacing inside of an element.

Margin & Padding Declarations

The values for margin and padding come in both long and short hand form. To set one value for all four sides of an element simply specify one value.

div {
  margin: 20px;
}

To set one value for the top and bottom and another value for the left and right of an element specify two values, top and bottom first then left and right.

TOP & BOTTOM – LEFT & RIGHTdiv {
  margin: 10px 20px;
}

To set unique values for all four sides specify them in the order of top, right, bottom, and left

TOP, RIGHT, BOTTOM, & LEFTdiv {
  margin: 10px 20px 0 15px;
}

Additionally, you can set the value for one side at a time using a unique property. Each property starts with margin orpadding respectfully and is then followed with a dash and the side of the box to which the value is to be applied, top,right, bottom, or left. As an example, the padding-left property takes one value and will set the left padding for that element.

div {
  margin-top: 10px;
  padding-left: 6px;
}

Borders

Borders fall between the padding and margin and provide an outline around an element. Every border needs three values, a width, style, and color. Shorthand values fall in the order of width, style and color. Longhand, these three values can be broken up into the border-width, border-style, and border-color properties.

Most commonly you will see one sized, solid, single colored borders. Borders do however have the capability to come innumerous sizes, shapes, and colors.

div {
  border: 6px solid #ccc;
}

Length Values

There are a handful of length values available to use with margins, padding, and borders, including relative and absolute values.

Relative values are correlative to the element of which the value is being applied. These values may include emand percentages.

Absolute values are fixed units of measurement regardless of the element. These values may include pixels, points, inches, centimeters, and more.

Floating Elements

Outlining elements within the box model is only half the battle to coding a page layout. The other half involves knowing how to properly align all of the different elements on the page. One way to position elements along side one another is to use the float property. The float property allows you to take elements and float them right or left, positioning them directly next to or opposite each other.

Take the common page layout with a section and an aside. The section and aside, as block level elements, will be stacked on top of one another by default. However, we want them to sit side by side. By giving each element a specificwidth and floating one of them left and the other to the right we can position them correctly.

Fig. 3.04A common page layout including floats and clears.

There are a few important things to note when floating elements. The first being, when floating an element it is going to float all the way to the edge of its parent container. If there isn’t a parent element it will float all the way to the edge of the page. Additionally, when floating an element other elements will begin to line up around it within the natural flow of the page.

section {
  float: left;
  margin: 10px;
  width: 600px;
}
aside {
  float: right;
  margin: 10px;
  width: 320px;
}

Clearing Floated Elements

Whenever an element is floated, it breaks the normal flow of a page and other elements will wrap around the floated one as necessary. Sometimes this is good, such as when floating an image to the side of a block of content, and sometimes this is bad.

To float an element, or handful of elements, and then return the document to its normal flow you use the clearproperty. The clear property acts on the element it is applied to and returns the document back to its normal flow, clearing every floated element up to that point.

In the example above, with the section and aside floated, we want to apply a clear to the footer to force it to fall below the two floated elements.

footer {
  clear: both;
}

Positioning Elements

Apart from floating elements you can also use the position property to align elements. The position property comes with a couple of different values, all of which have different functionalities behind them.

The default position value is static, which keeps elements within their normal flow. The relative value allows you to use box offset properties such as top, right, bottom and left. The absolute and fixed values work with box offset properties too, but break the element from the normal flow of a document. These values, absolute and fixed, correspond directly with an elements parent who has a position value of relative.

Fig. 3.05Absolutely positioning an unordered list within a header.

Taking the example above, the header element has been assigned a position of relative making it function as a static element yet act as the primary container to any absolutely positioned element within it. The ul is then absolutely positioned 10px way from the top right of the header element.

Altogether the code for this example would look as follows.

HTML

<header>
  <ul>...</ul>
</header>

CSS

header {
  position: relative;
}
ul {
  position: absolute;
  right: 10px;
  top: 10px;
}

Box Offset Properties

So long as an element’s position is not set to static the box offset properties may be used. These offset properties include top, right, bottom and left. Depending on the property, they position an element in the direction specified,top, right, bottom or left.

For example, bottom: 32px; will position an element 32 pixels from the bottom of its parent element with aposition value of relative. In contrast, bottom: -32px; will position an element 32 pixels below its parent element with a position value of relative.

Grids & Frameworks

There are numerous tools and practices to consider when building the layout of a site. Grids and frameworks have risen to the forefront.

Grids, both vertical and baseline, provide a great way to add cadence to your website and keep everything aligned. There are a handful of different recommended grids that have become popular over the years. You can pick from one of them or implement your own, whatever works best for your project.

Frameworks provide a way to rapidly build a website based on a set of predetermined standards. Depending on the project, frameworks can provide a great starting point or even a complete solution. They can also cause more trouble than they’re worth. Before getting too far over your head, research the framework and make sure you are comfortable working with it and editing it.