CODEWITHSUNDEEP
csshtml
Why Not
Why Not

Reputation: 611

Altering margin in figure tag

I just began employing the figure and figcaption tag into a project, but have run into an issue I can't seem to find addressed.

Using the figure tag, the following image and caption automatically indents. I have a vertical row of additional media with h tags that looks nice and linear and want to keep it that way. The automatic indent from the figure tag throws that off in an unpleasant manner. I'm using Django, so the pictures are user submitted (matching the image size to the caption is another issue).

Is there any way, likely using CSS, to remove that automatic indent? Any insight or experience greatly appreciated.

                {% 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 %}

Upvotes: 2

Views: 3617

Answers (1)

Henrik Janbell
Henrik Janbell

Reputation: 1922

Seems like browsers often adds a margin to figure. Try setting margin:0, like so:

figure {margin:0}

Upvotes: 6

Related Questions