CSSで「margin: auto;」が反映されない

下のコードのように、marginの値をautoに設定したのですが、ブラウザ表示を見ると、要素が画面の横幅いっぱいに広がっています。
これは、autoの値が反映されているのですか？それとも、コードにミスがあるのでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4 <title>CSS練習</title>
5 <meta charset="UTF-8">
6 <style>
7  .a{
8   margin-right:auto;
9   text-align:center;
10  }
11  .b{
12   margin:0 auto;
13   text-align:center;
14  }
15  p{
16   font-size:2.0rem;
17   backgrund:orange;
18   border:solid;
19  }
20 </style>
21</head>
22<body>
23 <p class="a">margin-right:auto</p>
24 <p class="b">margin:0 auto</p>
25</body>
26</html>

kei344

2018/05/19 02:07

「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

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

回答1件

ベストアンサー

widthの指定がありませんので、デフォルトのautoが採用され、コンテナ要素いっぱいに伸びます。
もっと詳しく知りたい場合は、仕様書を読むのがいいですが、それが難しいようでしたら、↓のページが詳しいです。
水平方向に値として[auto]を使用した場合 - CSS Dencitie
この場合、「非置換ブロック要素の場合」「'width'の値が[auto]の場合」があてはまり、「'width'以外の[auto]は"0"として扱われます。」となります。

投稿2018/05/19 02:32

編集2018/05/19 02:36