画像両サイドにpaddingを効かせたい

前提・実現したいこと

top.jpg 両サイドにpaddingを効かせたい

発生している問題・エラーメッセージ

右側のPaddingが効かない

該当のソースコード

ソースコード
<html>

<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
        }


        .outer {
            background-color: black;
        }

        .outer__inner {
            max-width: 1200px;
            position: relative;
            margin: 0 auto;
            box-sizing: border-box;

        }

        .outer__inner-img {
            margin: 0 auto;
            width: 100%;
            padding-right: 1.5em;
        }

    </style>
</head>

<body>
    <section>
        <div class="outer">
            <div class="outer__inner">
                <img class="outer__inner-img" src="top.jpg" 　alt="">
            </div>
        </div>
    </section>
    </div>
</body>

</html>

試したこと

初心者であれこれコードいじりましたが、どのブラウザでも右側のパディングがききません。

補足情報（FW/ツールのバージョンなど）

m.ts10806

2019/09/04 06:10

コードブロック部分は```で頭を後ろを囲います ```html //個々にコード ``` 行頭や行末に何もあってはいけませんし、前後に改行が必要です。

dit.

2019/09/04 06:48

質問内のコードが正しく読めないのでm.ts10806さんが指摘の通り質問を編集してください。また、どうなってしまっているのか、どうなってほしいのかを画像などで提示できますか？質問に画像を入れることができるので検討してください。 https://teratail.com/help/question-tips#questionTips3-7

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

回答3件

css
1.outer__inner-img {
2  margin: 0 auto;
3  width: 100%;
4  padding: 0 1.5em;
5}

このように変えてみてください。

投稿2019/09/04 08:11

frodo821

総合スコア322

KoTT

2019/09/04 09:29

検証しましたが、うまくいきませんでした。

frodo821

2019/09/04 09:57 編集

ふむ。ちょっと検証してみたのですが、paddingは入っていました。 Chromeでの画像です https://imgur.com/sLBQkmb それとも、こういうことではないということですか？

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

~~CSSで.outer__inner-imgと指定しながらHTMLでouterinner-imgと指定しているからでは。~~ （コメントで指摘いただきました）

追記：

これでどうでしょう。

CSS
1.outer__inner-img {
2  margin: 0 auto;
3  width: 100%;
4  padding-right: 1.5em;
5  box-sizing: border-box; /* ADD */
6}

【CSS box-sizing — 幅と高さの適用方法を制御 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

投稿2019/09/04 06:17

編集2019/09/04 08:17

kei344

総合スコア69398

dit.

2019/09/04 06:29

マークダウンで斜体扱いになって__が消えているような気がします。

kei344

2019/09/04 06:44

To: dit.さん指摘の通りですね。

KoTT

2019/09/04 09:30

すいません。ソースコードに''''を追記したら直りました。

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

自己解決

これで解決になったのかわかりませんが、

        .outer__inner {
            max-width: 1200px;
            position: relative;
            margin: 0 auto;
            box-sizing: border-box;

        }

        .outer__inner-img {
            margin: 0 auto;
            width: 100%;
            padding-right: 1.5em;
        }

ではなく

        .outer__inner {
            max-width: 1200px;
            position: relative;
            margin: 0 auto;
            box-sizing: border-box;
　　　　　　 padding-right: 1.5em;

        }

        .outer__inner-img {
            margin: 0 auto;
            width: 100%;
            
        }

と親要素にpaddingをつけると、うまくいきました。

投稿2019/09/04 09:34

KoTT

総合スコア19

yoshinavi

2019/09/04 09:59

「解決済」ですが、提示のコードでも、「kei344」さん「frodo821」さんの回答でも、パディングは表示されています。ひょっとしてですが、背景色指定をしていないので、「.outer」の背景色で区分けが出来ていないだけでは？「.outer__inner-img」に背景色を設定すると確認できますよ。

KoTT

2019/09/05 01:13

ありがとうございます。新規htmlファイルを作り直し、ご指摘いただいたコードを貼り付けると、paddingができました！何度も書き換えて検証しているうちに、不要なタグが入っていたようです。ありがとうございました。

yoshinavi

2019/09/06 02:53

CSSが「効かない？何故？」の状況は、今後も多々出てくるかと思いますので、その時は、背景色を付けたり、ボーダーを付けたりして、各要素の範囲を明確に区分していくと、コードの不備な部分や、別の組み合わせ方法等を試したりがしやすくなります。

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

あなたの回答