Code n' Social

What this lesson is about?
In this lesson we learn how to add border to text and images. We will experiment with adding distance between the content and its border.

New CSS properties in this lesson:
margin – this property is used to add distance between a content and surrounding elements. We can distance pictures or texts from the browsers margin or from each other. If we add only one value, it will be applied for all 4 sides of the content. We can also apply them separately, by using: margin-top, margin-right, margin-bottom, margin-left.

padding – with this property we can add distance between a content and its border. If we add only one value, it will be applied for all 4 sides. We can also apply them separately, by using: padding-top, padding-right, padding-bottom, padding-left.

border – this property added to an HTML tag results in creating a border around the content.
With this property, we can set the style, thickness and color of the border at the same time (shorthand), or, it is also possible to set them independently.

Example:

In the example above we apply a continuous, 5 pixel thick, blue colored line to the paragraphs using the order property.
The title and the browsers margins are at a distance of 20 pixels from the border. We use the margin property to achieve this.
The border and the paragraph’s text are at a distance of 10 pixels, settings are added using the padding property.

Guidance:

It is mandatory to specify the border’s type in the shorthand version (solid, dotted, dashed), otherwise the border won’t appear, but, the size or/and the color can be skipped and the border will still show.
The padding and margin can be set using other measurements, not only pixels: percentage, centimeters, points.
Both the padding and the margin property can be set in 3 shorthand ways, affecting the following sides:
-        With 1 value: padding: top&right&bottom&left; (ex: padding: 20px;)
-        With 2 values: padding: top&bottom left&right; (ex: padding: 20px 40px;)
-        With 3 value: padding: top left&right bottom; (ex: padding: 20px 40px 30px;)