HTML elements are contained within rectangular boxes, in CSS this is referred to as the box model.

CSS Box Model

Each HTML element has a box which wraps around the outer edges of the element. At the centre of this box is the content which is surrounded by padding, border and margin.

Content
The content is the area where text or an image is positioned.

Padding
The padding is a clear area around the content. Padding defines the distance between the content and the border.

Border
The border is a visible element around both the content and padding.

Margin
The margin is the transparent space between the HTML element and other HTML elements.

Let’s see how these properties can be applied to a <h1> headline.

The first three properties of the CSS rule (above) are settings for the content, we apply a width of 240 px (pixels) to h1 element, set the colour of the text to blue and the background colour to white.

Following this, we add 20px padding around the content, a solid blue 2px border and then a margin around the border of 50px.

Border

The border property has three values which are separated by space. Firstly we define the width of the border, followed by the border style (solid, dashed, dotted, etc) and then the border colour.

When we don’t want a visible border we set the width of the border to either zero 0 or use the value of none.

Browsers (user agents) set the default border value for most HTML element to null, so elements like headlines and text appear without a visible border.

Padding and margin

Padding and margin both define a clear or empty space (whitespace).

Earlier we defined the padding and margin for an <h1> element using a single value (20px for padding and 50px for margin), both these figures are shorthand properties for adding an equal amount of space on all four sides (top, right, bottom and left) of the content.

Padding and margin can have different values on each side.

Padding

Padding can be controlled individually on all sides using the following syntax:

In CSS, shorthand properties save development time and minimise code.

We already know the shorthand properties for adding an equal amount of padding around our content.

Shorthand properties can also be used to add different padding values to each side. Values are applied in the following order top, right, bottom and left. To help remember this order, we should first add the top value and then work clockwise around the object to define each side.

Shorthand properties can also be written to add equal padding top and bottom, left and right.

If we use two values this will apply equal padding top and bottom and equal padding to the left and right.

Using three values we apply different to the top and bottom and an equal amount of padding to the right and left sides.

Shorthand properties seem complex at first but once mastered can be used on different properties in a similar way.

Margins

Margin properties use a similar naming structure and shorthand properties for values as padding.

Margins, unlike padding, can have a negative value.

Width and Height

To define the size of the content we use the width and height property.

This size relates only to content, so any padding, margin and border will be added to the overall size of the element displayed.

To calculate the width on an element we add the left margin + left border + left padding + content width + right padding + right border + right margin.

Likewise, to calculate the height we also need to need to add all the values of the of an element – top margin + top border + top padding + content height + bottom padding + bottom border + bottom margin.

This obviously makes calcualting the size an element more complicated than it would first appear. Fortunately, CSS has an alternative way to define the box size using the box-sizing property.

Box-sizing

The default CSS box model can be altered so that the dimension for the border and padding are included in the overall width and height dimensions of the box.

In order to do this, we have to set the box-sizing property to border-box.

Here we use the universal selector to make border-box a standard across all elements with our HTML document.

By default, box-sizing is set to box-sizing: content-box;

Setting box-sizing: border-box; is a great way to define content size as this makes life much simpler to calculate the overal size of an elements. 

Min and Max sizing

People use different devices (viewports) to view HTML content. Sometimes we need to restrict the size of the content being displayed on the different devices so that it looks and reads as it was intended.

We can use min and max sizing to set restrictions for the size of an element.

The above CSS defines maximum width of the paragraph at 600px. The paragraph maybe smaller than 600px but it will never appear larger.

The syntax for the min and max properties:

CSS Units

All the above CSS examples have used px (pixels) as the unit of measurement. This is called an absolute unit of measurement and one of many different types of measurement which can be used in CSS.

Absolute units

Absolute units are fixed measurements and include the following units:

Relative units

Relative units change size based on the related size they are based on.

For example, if we have an element which 2em in size and one em is equal to 16px then the size of the 2em element is 32px, if we change the value of em to 20px then 2em will be 40px.

Relative units measurements include the following:

Responsive design uses relative units, especially em and rem, to make adjustments to content for different sizes of device.

More information on the different types of units can be found here.

Next step 
CSS – 3 – Colour