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):
CSS representation | Meaning |
---|---|
px | Pixels |
% | Percentage of parent |
em | The computed font size. |
ex | Height of a lowercase x |
mm | SI unit for measuring distance |
rem | Root element font size |
in | Inches |
pt | Point (such as in Microsoft Word for instance) = 1/72 inches |
vh | Viewport height |
vw | Viewport width |
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%; }
Adding padding to an element adds to the size. If an element has a width set to 100% and padding of 15px then it's width is calculated as 100% + 15px. Specifying no width on a block element and adding padding gives it an automatic width of 100% - 15px when padding of 15px is applied to the element.
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:
Value | Purpose |
---|---|
visible
|
Content will stretch out of the boundaries of its parent. This is the default option. |
hidden
|
Any content stretching out of the element will be hidden. |
scroll
|
Always shows scrollbars and if the content stretches out of boundaries enables the scrollbars. |
auto
|
Enables scrollbars when the content stretches out of its parent's boundaries. |
.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
: