段落？margin？padding？

上記のように、リンクの上に段落を入れたいのですが、入れ方がわかりません。
「むかしむかし〜」の文と「おばあさんが〜」の分の間を１文字分のみ開けたまま

<p>と<a>の間に１文字分の段落を入れたいです。いくら調べても分からないため、質問致しました。

「HTML」

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>昔話</title>
6<link rel="stylesheet" href="challenge_momotaro.css">
7</head>
8<body>
9  <h1>桃太郎</h1>
10   <p>むかしむかし、あるところにおじいさんとおばあさんが住んでいました。おじいさんは山へ芝刈りに、おばあさんは川に洗濯に行きました。</p>
11   <p>おばあさんが洗濯をしていると、川上からどんぶらこどんぶらこと、大きな桃が流れてきました。</p>
12  <a href="http://codecamp.jp">CodeCamp</a>
13</div>
14</body>
15</html>

「CSS」

CSS
1body{
2  background-color: black;
3}
4
5h1 { margin-top: 0; margin-bottom: 0;}
6a { margin-top: 2;}
7p { margin-top: 0; margin-bottom: 0; }
8
9h1{
10  font-size: 24px;
11  color:red;
12  text-align: center;
13  padding: 0.5em 0;
14  border-top: dashed 3px white;
15  border-bottom: dashed 3px white;›
16  padding:0.5 0;
17}
18
19p{
20  font-size: 16px;
21  color:#ffffff;
22}
23
24a{
25  font-size: 16px;
26  color: #4b0082;
27}

kei344

2018/10/06 12:18

コードはスクリーンショットでなくコードブロックにテキストでお書きください。

kei344

2018/10/06 12:28

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1/*
2↓ aの直前に制御文字が入っている */
3a { margin-top: 2;}

CSS
1h1{
2  font-size: 24px;
3  color:red;
4  text-align: center;
5  padding: 0.5em 0;
6  border-top: dashed 3px white;/* ↓不要な文字が入っている */
7  border-bottom: dashed 3px white;›
8  padding:0.5 0;
9}

HTMLのほうにも制御文字が入り込んでいるので、制御文字を表示できるエディタなどを探されてはいかがでしょうか。

【HTML - Atomのエディターで目に見えない文字が入ってしまう(124949)｜teratail】
https://teratail.com/questions/124949

それを直した上で、これでとりあえず出来ます。

CSS
1a {
2	margin-top: 2em; /* ← 単位が必要 */
3	display: inline-block; /* a要素はinlineが初期値なので、上下のmarginが付かない */
4}
5```**動くサンプル：**[https://jsfiddle.net/7gdkv15t/](https://jsfiddle.net/7gdkv15t/)