pタグ間の空白を0にしたい

[code]

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

[code]

    <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>
[/code]

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

↓成功イメージです。  
[![成功イメージ](https://i.stack.imgur.com/RqF89.png)](https://i.stack.imgur.com/RqF89.png)




>
[code]

>     margin: 1rem auto;}
>     }
>  
[/code]

不正な閉じ括弧のせいでCSSが解釈されていません。




>
[code]

>     margin: 1rem auto;}
>     }
>  
[/code]

不正な閉じ括弧のせいでCSSが解釈されていません。

