Chapter 6: Box Properties

Box Properties

CSS’ box properties allows us to control the margins, padding and border characteristics of block elements. With their special properties such as float, clear, width and height, we will be able to create content and position them free-flowingly on our webpages.

The CSS Visual Formatting Model describes how the content pages should be displayed by the browser. As usual, how our page turns out to the viewer greatly depends on their browser version. Here are two direct definitions of the two types of box elements, taken from Sklar on page 245:

• Block – Block-level boxes appear as blocks, like paragraphs. They can contain other block elements or inline boxes that contain the element content.
• Inline – Inline-level boxes contain the content within the block-level elements. They do not form new blocks of content.

The CSS display property tells the browser how to display the elements. The initial value is ‘inline’, but you can change this to block, list-item, table and table-row (although the last two are not supported by all browsers). The display property is often used to create horizontal navigation lists.

li { display: inline;

list-style-type: none; /*This hides the bullets normally displayed with unordered lists*/

}

<ul>

<li><a href=”url”>Home</a></li>

<li><a href=”url”>Prodcuts</a></li>

Etc. etc.

</ul>

To clarify – the border is the actual line boxing in the content. The margin is the space between the border and outside content. The padding is the space between the content and the inside border. A sample simple code looks like this:

p {

margin: 2em;

padding: 2em;

border: solid thin black;

background-color: white;

}

Each of the sides can be selected individually given that your browser supports showing it: margin-left, border-right, padding-top, etc. You can choose to be very specific (ex: border-left-color) or broad (ex: border). When creating a border, know that you must specify the border style. The style must be declared in order for the border to appear. The border-style property lets you select from one or more of the following border style keywords: dotted, dashed, solid, double, dot-dash, dot-dot-dash, wavy, grove, ridge, inset, or outset. If the border you specified is not supported by the browser, the border will default to a solid line.

A note about measurements – you are better off building your website using relative values so that you are building a scalable website to suit your viewers’ browsers.

Page Layout Box Properties

These properties give you greatest control over the exact shape of a content box and creation of columns for content. You can specify where the boxes align to on the page and set your paragraphs to wrap around them. You also can set the min and max widths and heights of your boxes to allow for resizing.

Width and height can be specified simply by stating: div {width: 200px; height: 500px;}. Be wary about specifying height, though. Height only (really) needs to be specified on images and certain boxes you want to follow your page design. Minimum height and width can be set as follows:

div.content {

width: 100%

min-width: 750px;

max-width: 1280px;

}

This sets the width to fill the entire browser up to a certain point. You don’t want your content to be stretched out too much if your viewer has a ginormous screen!