<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    body {
    width: 20rem;
    margin: 1rem auto;} 
    }
    p.foo {
    width: 10rem;
    text-indent: 0rem;
    padding-left: 1rem;
    margin: 0rem;
    }
    section.bar {
    margin: 1rem;
    padding: 0rem;
    }

<!-- language: lang-html -->

    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styletest.css">
    </head>
    <body>
    <section class = "bar">
    <p class = "foo">
    ①The quick brown fox jumps over the lazy dog.
    </p>
    <p class = "foo">
    ②The quick brown fox jumps over the lazy dog.
    </p>
    <p class = "foo">
    ③The quick brown fox jumps over the lazy dog.
    </p>
    </section>
    <section class = "bar">
    <p class = "foo">
    ④The quick brown fox jumps over the lazy dog.
    </p>
    <p class = "foo">
    ⑤The quick brown fox jumps over the lazy dog.
    </p>
    <p class = "foo">
    ⑥The quick brown fox jumps over the lazy dog.
    </p>
    </section>
    </body>
    </html>

<!-- end snippet -->

①と②、②と③、④と⑤、⑤と⑥の間の空白を無しに、③と④の間は1行分空白をあけたいです。どうすればよいでしょうか。

↓成功イメージです。
[![成功イメージ][1]][1]


  [1]: https://i.sstatic.net/RqF89.png