css - 図形タグの余白を変更する

Question

figure と figcaption タグをプロジェクトに採用し始めたばかりですが、対処されていないように見える問題に遭遇しました。

figure タグを使用すると、次の画像とキャプションが自動的にインデントされます。見栄えがよく直線的な h タグ付きの追加メディアの縦の列があり、それを維持したいと考えています。figure タグからの自動インデントは、不快な方法でそれを無効にします。私は Django を使用しているため、写真はユーザーが投稿したものです (画像サイズをキャプションに一致させることは別の問題です)。

おそらくCSSを使用して、その自動インデントを削除する方法はありますか? どんな洞察や経験でも大歓迎です。

                {% if story.pic %}
            <h2>Image</h2>
              <figure>
            <img class="image"src="{{ story.pic.url }}" alt="some_image_alt_text"/>
            {% if story.caption %}
                <figcaption>{{story.caption}}</figcaption>
            {% endif %}
            {% endif %}

Answer 1

ブラウザはしばしば図に余白を追加するようです。次のように、margin:0 を設定してみてください。

figure {margin:0}