htmlのbackground-colorを使うとmarginもおかしくなります

htmlのmargin・padding・ borderを今勉強中です。
下記の（A)の部分はOKなのですが、背景色をつけようとして（B)のCSSにstyleを追加するとおかしくなります。
どこに問題があるのでしょうか。よろしくお願いします。

（A)
CSS---
.pborder3{
margin:5em 20em;
border:solid 3px #eb00ff;
font-size:20px
}

html---

<!DOCTYPE html> <html lang="ja"> <head> <link href="style.css" media="all" rel="stylesheet"> </head> <body> <p class="pborder3">こんにちは！講師の佐藤です！今回はCSSの基本であるmargin・padding・ borderについて詳しく紹介します！</P> <body> </html>

（B)
.pborder3{
margin:5em 20em;
border:solid 3px #eb00ff;
font-size:20px
background-color:#c0c0c0;　　←この部分を追加するとおかしくなります。
}

m.ts10806

2019/03/10 23:50

回答はしたのですが、コードはマークダウンのcode機能を利用してご提示ください。質問は編集できるので適宜ご対応ください

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

回答3件

font-size:20pxの後に;がついていないからですかね。

css
1.pborder3{
2margin:5em 20em;
3border:solid 3px #eb00ff;
4font-size:20px; /* ここ */
5background-color:#c0c0c0;
6}

ちなみにteratailでは質問やコードを見やすくするための仕組みがあります。
質問文と回答で使えます（コメントでは使えません）。
今後質問される際は気にしてみてください。
質問するときのヒント
ここのアニメーションがわかりやすいかも3分でわかるteratail

投稿2019/03/10 23:55

dit.

総合スコア3235

ベストアンサー

直前の指定の末尾で;
が抜けてます。

構文チェック機能のあるエディタ使いましょう。文字色がかわるなどして実行前に教えてくれます。

ちなみにteratailで使えるマークダウンでコードを囲った場合

css
1.pborder3{
2  margin:5em 20em;
3  border:solid 3px #eb00ff;
4  font-size:20px
5  background-color:#c0c0c0;
6}

本来属性であるbackground-colorが文字色黒いですよね？ここで「おかしい」と気づくこともできます。

修正後のコードと比べると一目瞭然。

css
1.pborder3{
2  margin:5em 20em;
3  border:solid 3px #eb00ff;
4  font-size:20px;
5  background-color:#c0c0c0;
6}

構文チェック機能のあるエディタ：
他の言語も込みで使えるならIDEでEclipseとか
私はHTML、CSS、JavaScriptのみであればBracketsを良く使います。
※他にもデフォルトで構文チェック機能があるもの、プラグインで追加するものも含めて沢山あります。
このくらいの構文ミスで質問することになると、時間は結構勿体無いので、こういったツールは活用していきましょう。
今ならWeb上で構文チェックサービスもあります。

投稿2019/03/10 23:49

編集2019/03/11 01:34

m.ts10806

総合スコア80850