To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

# 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.

CSS
.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.

CSS
.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 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:

CSS
.padded{
}


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.

CSS
.padded{
}


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

CSS
.padded{
}


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

CSS
.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:

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


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

Just as with padding, adding a margin to an element adds to the size. If an element has a width set to 100% and a margin of 15px then it's width is calculated as 100% + 15px. Again specifying no width on a block element and adding a margin gives it an automatic width of 100% - 15px when a margin of 15px is applied to the element.

Margins can also be shorthanded:

CSS
.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:

CSS
.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:

CSS
.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:

CSS
.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.
CSS
.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:

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


The following example has the default overflow: visible:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed fringilla orci. Nam eleifend cursus purus non pharetra. Proin aliquam facilisis egestas. Nullam pretium ante velit, non iaculis eros lacinia a. Donec ut pretium velit. In auctor sit amet leo vel vulputate. Donec porta quis est ac semper. Vivamus eget nisl eu est scelerisque tristique vel tempus tortor. Donec dignissim tellus ut dictum efficitur. Quisque nec tellus ex. Vivamus vestibulum malesuada enim in condimentum. Aliquam euismod est in aliquet laoreet.

The next example has overflow: hidden:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed fringilla orci. Nam eleifend cursus purus non pharetra. Proin aliquam facilisis egestas. Nullam pretium ante velit, non iaculis eros lacinia a. Donec ut pretium velit. In auctor sit amet leo vel vulputate. Donec porta quis est ac semper. Vivamus eget nisl eu est scelerisque tristique vel tempus tortor. Donec dignissim tellus ut dictum efficitur. Quisque nec tellus ex. Vivamus vestibulum malesuada enim in condimentum. Aliquam euismod est in aliquet laoreet.

And the final example has overflow: auto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed fringilla orci. Nam eleifend cursus purus non pharetra. Proin aliquam facilisis egestas. Nullam pretium ante velit, non iaculis eros lacinia a. Donec ut pretium velit. In auctor sit amet leo vel vulputate. Donec porta quis est ac semper. Vivamus eget nisl eu est scelerisque tristique vel tempus tortor. Donec dignissim tellus ut dictum efficitur. Quisque nec tellus ex. Vivamus vestibulum malesuada enim in condimentum. Aliquam euismod est in aliquet laoreet.
Code preview
Feedback 👍
Comments are sent via email to me.