Margin and spacing rhythm

Read first Task 14

Pick one spacing scale (4, 8, 16, 24, 32) and reuse it instead of random numbers.

What you are building

The task in front of you: Which property pushes an element away from its neighbours?.

The editor already holds a working starting point. Do not delete it and start again — read it, change one thing, run it, and watch which check moves. That loop is the whole method.

Why this matters

You are inside the section “CSS styling” of the Responsive Web Design track. Everything in this section builds towards the section project, and this task is one of the pieces that project leans on.

In real work nobody marks your code — it either runs or it does not, and someone is waiting for the result. The checks here are deliberately strict about output, because a program that prints the right thing in the wrong shape fails in the real world too.

The key idea

A browser turns markup into a tree, and every tag you write becomes one node in it. Elements nest; text lives inside an element, never floating between two of them.

Write the structure first and the styling later. A page with clean, meaningful tags is easy to style and easy for a screen reader to follow.

Two mistakes to avoid

Leaving a tag open. One unclosed element silently swallows everything after it, and the page looks "almost right" in a way that is hard to spot.
Using a div where a heading belongs. The checks look for real structure — h1, h2, ul, li — not styled text.

What the automatic checks look for

The right-hand column runs 1 check every time you press Run code. Nothing is hidden:

The output has to contain “js:expect(document.query…”.

Task

Which property pushes an element away from its neighbours?

The editor already contains a starting point. Change it until every check passes — the Next task button unlocks when it does.

What you start with

<style>
  section { }
</style>
<section><h2>A</h2></section>
<section><h2>B</h2></section>

HTML & CSS 1 automatic check CSS styling

Code editor Ctrl + Enter runs

<style>
  section { }
</style>
<section><h2>A</h2></section>
<section><h2>B</h2></section>

Run your code to see the output and the checks.

Your result

Submit your code to see results

Write your code in the middle column and press Run code.

Checks on this task:

Check 1

Stuck? The Hint button at the bottom nudges you one step without handing over the answer — that is on purpose: an exercise you copied teaches nothing.

Track progress

0 of 56 tasks complete

Next task unlocks when every check passes.

← Previous

Next task (pass every check first)

Margin and spacing rhythm