配列の中にある要素で改行がしたい。またCSSの中でpaddingやmarginが効かない。

JavaScriptの勉強を今年に入ってから始め(プログラミング自体初めてです)、練習として犬の犬種をプルダウンメニューで選択すると、検索結果という文字、その犬種の名前、その犬種の写真、その犬種の説明が表示されるWEBアプリを作ろうとしています。

以下が私が書いているコードです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>ワンダフル 犬検索</title>
8    <link rel="stylesheet" href="dog.css">
9    <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
10</head>
11<body>
12    <div class="header">ワンダフルいぬけんさく</div>
13    <h1>気になっている犬を選んでね</h1>
14    <select id="dogWant">
15        <option value="0">シェパード</option>
16        <option value="1">ラブラドール・レトリーバー</option>
17        <option value="2">ポメラニアン</option>
18    </select>
19    <div class = "result-area">
20    <p id="result"></p>
21    <p id="kindOfDog"></p>
22    <p id="picture"></p>
23    <p id="description"></p>
24    </div>
25    <script src="dog.js"></script>
26</body>
27</html>

CSS
1body {
2    margin: 0;
3    background-color: lightgreen;
4    color: rgb(65, 60, 60);
5    text-align: center;
6}
7
8.header {
9    background-color: rgb(240, 235, 235);
10    text-align: center;
11    font-family: "Hannari";
12    font-size: 60px;
13    margin: 0;
14    padding: 0;
15}
16
17#want-dog {
18   font-size: 30px;
19   padding: 5px;
20   color: rgb(65, 60, 60);
21   background-color: rgb(229, 230, 221);
22   border-style: dashed;
23}
24#description {
25    margin: 0 100 0 100;
26    padding: 100 100 100 100;
27    font-size: 20px;
28    
29}
30

JS
1//HTMLの方に犬の名前や写真などを表示するために準備した場所を取得し、変数に代入。//
2const eranda = document.getElementById("dogWant");
3const searchResult = document.getElementById("result");
4const DogName = document.getElementById("kindOfDog");
5const pictureDivided = document.getElementById("picture");
6const descriptionDivided = document.getElementById("description");
7
8
9
10//犬の名前を配列dogarrayに入れる//
11const dogarray = [
12    "シェパード",
13    "ラブラドール・レトリバー",
14    "ポメラニアン"
15];
16
17//犬の画像を犬の名前と同じ順番で配列dogPictureArrayに入れる//
18const dogPictureArray = [
19    "img/シェパード.png",
20    "img/ラブラドール・レトリーバー.jpg",
21    "img/ポメラニアン.png"
22];
23
24//犬の説明を犬の名前と同じ順番で配列dogDescriptionに入れる//
25const dogDescription = [
26    "シェパードはドイツ原産の犬だよ。「牧羊犬」という意味だけど、牧羊犬として使役されたことはないんだって。びっくりだね。知的で忠誠心と服従心に富み、訓練を好む性格から種々な作業犬として訓練され、災害救助犬・軍用犬・警察犬・麻薬探知犬など特殊訓練を必要とする作業犬として活用されているよ",
27    "ラブラドール・レトリーバーです。",
28    "ポメラニアンです。"
29];
30
31//プルダウンメニューで犬の名前が押されたときに実行する関数//
32eranda.onchange = event => {
33
34
35
36searchResult.innerText = "";
37DogName.innerText = "";
38pictureDivided.innerText = "";
39descriptionDivided.innerText = "";
40
41//HTMLのセレクトタグの中のoptionが持つvalueの値を配列を取り出すときに使う番号として変数dogTypeに代入//
42const dogType = eranda.value;
43
44//うまく行っているかconsole.logでも確認//
45console.log(dogarray[dogType]);
46
47
48const kensakukekka = document.createElement("h2");
49kensakukekka.innerText = "🐶犬索結果🐶";
50searchResult.appendChild(kensakukekka);
51
52const inunosyurui = document.createElement("h1");
53inunosyurui.innerText = dogarray[dogType];
54DogName.appendChild(inunosyurui);
55
56const gazou = document.createElement("img");
57gazou.src = dogPictureArray[dogType];
58gazou.alt = "犬の画像";
59gazou.width = 500;
60gazou.height = 500;
61pictureDivided.appendChild(gazou);
62
63
64const setsumei = document.createElement("p")
65setsumei.innerText = dogDescription[dogType];
66descriptionDivided.appendChild(setsumei);
67
68}
69

困っていること
①CSSの中の要素でpaddingやmarginが効いていない(と思う)。たとえば#descriptionの中にあるpaddingやmarginが効いていない。
②dogDescriptionという配列の中に犬の説明を格納しています。このまま表示すると改行されず一気に表示されて見づらいので改行したいのですが、配列の中でどのように改行を設定してよいのかが分かりませんでした。(<br>も試しましたが、やはりそのまま表示されるだけでした。)

よろしくお願いします。

回答1件

ベストアンサー

効いていないなと思ったら、開発者ツール（Elements > styles）を見てみましょう。警告マークと、なぜ動かないかが分かります。今回は単位が無いのがだめだったので、margin: 0px 100px 0px 100px; など、 px をつけてください。
\n （改行コード）を使うと改行されます。

投稿2022/01/20 15:12