Part 3.2Size, box model and overflow

The box model is the most fundamental layout model in CSS. It describes how a browser will display an element including all of it's dimensions and it's position in relation to other elements.

You can test out the box model using the box model tool on this website.

Width and height

Width and height are both metrics of type size. In some programming languages, such as VB.NET, size is the metric for size, but with CSS there is not even a shorthand for width and height - they must both be defined individually.

If no width or height is declared on an element it takes the form of it's display model - that is if it is given display: block it will stretch 100% of its parent - that is with most elements.

.fixed-size{
	height: 100px;
	width: 15px;
}
.scale-size{
	height: 30%;
	width: 10%;
}

There are multiple different units that can be applied to sizes (even more can be found with a quick search of the web but they are not used as often as the following):

Widths and heights can also be limited using both the min-width and min-height and the max-width and the max-height properties.

.limited-size{
	min-height: 200px;
	min-width: 200px;
	height: 70%;
	width: 70%;
}

In this example, the element will be 70% of its parent's width and height, but when it reaches 200 pixels it will stop getting smaller.

Padding

Padding is basically as it would be for a car, for instance, designed to cushion the box. With a car, padding is on the inside of the car and is designed to reduce damage to the passengers. Cushioning here simply means adding extra space between the edge of the border of the box and the inner elements.

Padding is more about the appearance that it adds than layout because it does not change the outside of the box. Using padding on the outer element over the margin property on an inner element is practically the same - padding is a very powerful tool.

Padding is applied from all four sides or from one at a time:

.padded{
	padding-left: 10px;
	padding-right: 15px;
	padding-top: 5%;
	padding-bottom: 10%;
}

As with many CSS classes, there exists a shorthand versionShorthand versionA shorthand version is one that applies to all properties but can optionally just apply to each property individually, but in a single property.:

.padded{
	padding: 10px;
	padding: 10px 5px;
}

The first example applies 10px padding to all sides. The second example is a shorthand for:

.padded{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

Padding can also be shorthanded into a single property that affects all four properties as demonstrated:

.padded{
	padding: 5% 15px 10% 10px;
}

This example is a shorthand for the first example of padding.

Margin

Margins work much like padding in that they create extra space, and the two can be interchanged at any time (as they are opposites).

Margins work on the outside of a box, instead of cushioning the inside of the box, they cushion the outside.

Margins also work very similarly to padding when they are used:

.margins{
	margin-top: 5px;
	margin-bottom: 10%;
	margin-left: 5%;
	margin-right: 15px;
}

Any of the aforementioned units may also be used with margins.

Margins can also be shorthanded:

.margins{
	margin: 10px;
	margin: 10px 5px;
}

Once again, the first example in this sample gives a margin to all sides. The second example is once again shorthand for:

.margins{
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
}

Margins also have a shorthand to apply to each property from the one property:

.margins{
	margin: 5% 15px 10% 10px;
}

Again, this example is shorthand for the first example of margins.

Margins can be used for positioning elements. For instance, this webpage has a centered <div> element. This is achieved with CSS and the margins applied to it:

.centered{
	display: block;
	margin: auto;
	width: 300px;
}

Overflow

Web documents can be seen as being similar to any other program on a computer since the advent of CSS. One feature of a standard software program is the ability to scroll around the software. Web documents allow this to be achieved using the overflow property.

The overflow property states what happens when the content begins to overflow or leave its boundaries. The boundaries must be set by some defining property such as the width or height of the element. If there are no constraints on the height or width of the element, the content simply resizes its parent element.

If there are constraints on these properties, the content will begin to leave the boundaries of its parent. To prevent this, overflowable content must be hidden.

The overflow property has the following values:

.hidden_overflow{
	overflow: hidden;
	width: 300px;
	height: 300px;
}
.scrollable{
	overflow: auto;
	width: 300px;
	height: 300px;
}

The overflow property is actually a shorthand for two other properties, which can both be set individually:

.scrollable{
	overflow-x: auto;
	overflow-y: auto;
	height: 300px;
}

The following example has the default overflow: visible:

The next example has overflow: hidden:

And the final example has overflow: auto: