CSS: Paddings

Looking at the various blocks that we've created during our lessons, you'll notice that the text "sticks" to the edges of the blocks. For example:

A card with white text on a purple background

You might say that that's not how the examples usually look in the lessons themselves, and you'd be right. In each example, internal indents from the block edges called margins were used to add a little spacing.

Four rules are used to create internal indents:

padding-top
padding-right
padding-bottom
padding-left

Each property takes a numeric value and a unit of measurement, e.g. pixels

<div class="card">A card with white text on a purple background</div>

.card {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;

  color: #ffffff;
  background-color: #673ab7;
}

A card with white text on a purple background

Shortened property

If you want to set indents on all sides, don't use 4 different properties, you only need one - padding. This is shorthand for some properties we already know which allows you to set them in the following order:

top
right
bottom
left

The order in which it is specified is important and corresponds to the order specified above. If you rework the example above, it will look like this:

.card {
  padding: 10px 0 10px 20px

  color: #ffffff;
  background-color: #673ab7;
}

In addition to this notation, there are shorthand notations of these rules for convenience:

If you specify only one value, it will be used simultaneously for all sides
If you specify two values, the first will be used for vertical (top and bottom) margin and the second for horizontal (right and left) margin
If you specify three values, they will be used for top, horizontal and bottom margin

Instructions

Add a paragraph to the editor with the class set to padding and set internal indents:

10 pixels at the top
15 pixels at the bottom
20 pixels left and right

Use the following text for the paragraph:

What does a web designer do? They create pages using HTML and CSS. They can use the capabilities of Flex and Grid modules. They use the SASS preprocessor and the Pug templating engine, and builds projects with Gulp. They keep track of site accessibility by creating semantically correct markup. They create components and utilities on Bootstrap. They lay out adaptive projects.

The text itself does not matter and won't be checked. The main purpose is to add text to be arranged in multiple lines. This will help you see the left and right indents correctly.

Add a black background to the paragraph and white text. Try different values for the padding property to see how it affects the block.

Write the styles in the <style> tag

languages.lessons.show.profession_description

The exercise doesn't pass checking. What to do? 😶

If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:

Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.

In my environment the code works, but not here 🤨

Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.

My code is different from the teacher's one 🤔

It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.

In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.

I've read the lessons but nothing is clear 🙄

It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.

By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.

Found a bug? Have something to add? Pull requests are welcome!

Hi! I'm Tota, and my job is to help you learn. To activate me, please sign up or log in if you already have an account

Your exercise will be checked with these tests:

1const { test } = require('tests');
2
3test(({ query, expect }) => {
4  const element = query(document, '.padding');
5
6  const style = getComputedStyle(element);
7  expect(style).to.have.property('padding-top', '10px');
8  expect(style).to.have.property('padding-bottom', '15px');
9  expect(style).to.have.property('padding-left', '20px');
10  expect(style).to.have.property('padding-right', '20px');
11});
12

Teacher's solution will be available in:

20:00

← PreviousNext →