Working with padding in CSS

We've covered the margin property, which makes an outward margin from the border. There's also a very similar property, padding, which makes an inward margin from the border.

Let's now look at examples of how this property works. First, I'll give a block without indents (its text is stuck to the borders):

html<div id="elem">
  some long text
</div>
css#elem {
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат:

Now let's set padding to 30px for all sides:

html<div id="elem">
  some long text
</div>
css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат:

Задание 1

Repeat the page according to this example:

Задание 2

Repeat the page according to this example: