teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

説明の改善

2020/02/13 03:35

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -1,8 +1,28 @@
1
+ > coloursクラス 「lightblue」「sakura」「ivory」
2
+
3
+ > marginを使って、この3つのボックスを並べたいのですが、
4
+
1
5
  pタグ内にdivタグを入れるのは間違いです。
2
6
  pタグは段落を表しますので、その中にブロック要素は入れられません。
3
7
  詳細は下記参照。
4
8
  [<DIV>タグと<P>タグ](http://www.eonet.ne.jp/~nga/html/div&p.html)
5
9
 
10
+ ブラウザによって自動でpの閉じタグが挿入されます。
11
+ 検証ツールでみると下記のようになっているのが確認できます。
12
+ ```html
13
+ <p class="colours">
14
+ </p> /*ブラウザによって挿入*/
15
+ <div class="lightblue">lightblue
16
+ </div>
17
+ <div class="sakura">sakura
18
+ </div>
19
+ <div class="ivory">ivory
20
+ </div>
21
+ <p> /*ブラウザによって挿入*/
22
+ </p>
23
+ ```
24
+ 3つのボックスはcoloursクラスの外に出てしまってます。coloursクラスに設定したmarginは適用されません。
25
+
6
26
  pタグをdivタグに変更しましょう。
7
27
  ```html
8
28
  <div class="colours">

1

説明修正

2020/02/13 03:35

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -18,4 +18,4 @@
18
18
  </div>
19
19
  ```
20
20
 
21
- これで、colours内に3つのボックス入ります。
21
+ これで、coloursクラスのブロック内に3つのボックス入ります。