中央寄せ、余白の設定　CSSが反映されない

ロゴ画像を中央寄せにし、さらに、paddingで余白設定したいと思っています。しかし、下記のように設定しても変わりません。そもそも、<p>の中にimg srcは入れて、CSSシートでもそのようにしなければいけないというルールなどはあるのでしょうか？ご教示のほどよろしくお願い致します。

ｈｔｍｌは下記

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

</head>
<body>
    <img src="images/logo.png" width="400" height="40" >
    <img src="images/mainimg.jpg">
</body>

</html>

CSSは下記

img{padding: 10px;}
body{text-align:center}

Lhankor_Mhy

2020/09/01 08:18

ご提示のコードを試してみましたが、当方の環境では中央寄せされていました。パディングも効いています。 ↓サンプルを作りましたので、ご確認ください。 https://jsfiddle.net/Lhankor_Mhy/w6ebkju0/

B_J

2020/09/01 08:33

ありがとうございます。<link rel="stylesheet" href="style.css">がなかったのが原因のようでしたが、教えて頂いたものはしっかりできているようなのですが、逆に何故なのでしょうか？後学のためにご教示くださいましたら幸いです

Lhankor_Mhy

2020/09/01 08:42

サンプルでは link がないのになぜ動いているのか、ということですか？スタイルを記述する方法は link 以外にもいくつかある、というのがその理由です。 ↓が参考になるかもしれません。 http://www.htmq.com/csskihon/004.shtml ご解決されて何よりです。自己解決の処理をお願いいたします。 https://teratail.com/help#resolve-myself

B_J

2020/09/02 03:21

まだすみません、最初に教えて頂いたコードですが、linkもstyleもないのに、どうして動いているのでしょう？CSSシートを別に用意してリンク付け、その他２つのCSSを適用する方法、どれもやられていないようなコードと見受けられるのですが・・・

Lhankor_Mhy

2020/09/02 03:25

そういうツールなのです。 > ［CSS］パネルに入力したコードはドキュメントの<head>要素内の<style>要素に記述されたものとして扱われる。 https://www.atmarkit.co.jp/ait/articles/1701/24/news022.html

B_J

2020/09/02 03:29

ご返信が早くて驚き＆嬉しかったですありがとうございます。サンプルを作りましたので、ご確認ください。 https://jsfiddle.net/Lhankor_Mhy/w6ebkju0/ を拝見すると、どこにも、styleのコードなどの記載が無いですよね？すみません、私にはレベルの高すぎる話の様です・・・。

Lhankor_Mhy

2020/09/02 03:30

右上のCSSの欄がそれですが……

B_J

2020/09/02 08:24

右上のCSS蘭も、img{padding: 10px;} body{text-align:center}としか書かれておらず、私のと同じですよね？どこが違うのでしょうか？何度もすみません

Lhankor_Mhy

2020/09/02 08:28

繰り返しで申し訳ないのですが、そのページは、そういうことを自動的にやってくれるツールなのです。 > ［CSS］パネルに入力したコードはドキュメントの<head>要素内の<style>要素に記述されたものとして扱われる。 > ... > 大ざっぱには3つのパネルを利用して次のようなコードを入力しているのと同様だ（HTML5の場合）。 > <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> …… ［CSS］パネルに入力されたコード …… </style> https://www.atmarkit.co.jp/ait/articles/1701/24/news022.html

B_J

2020/09/02 08:31

なるほどそういうことなんですね！すみません！本当にご迷惑をおかけしました！