Lessons menu
CSS - intermediate - Lesson nr. 5
Distances and simple borders

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.


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.

  • 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;)
1. Add a class name to the image in the aspects.html file and style it in the styles.css with 2px solid border with a color selected by you. The color of the border should change when we move the cursor over it.
View the result
2. Apply to all paragraphs a 1px left border, with a color selected by you, 20px distance to the left between the border and the text and 10px between the browser’s margin and the border.
View the result
3. Add the following settings to the picture on the index.html page: the image and the caption should be at a half centimeter distance at the left from the browser’s margin, the caption should be at 0.25 centimeters distance on top, from the image.
View the result
1. What does it mean to the picture, if we add the following setting?
margin: 0px 10px;
2. Which CSS formatting is wrong?
3. Which of the following descriptions does not result in a visible border?
4. If we apply the settings bellow to a picture, what distance does it get from the other contents around it?
padding: 10px;
margin: 5px;
border: 2px solid;
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept