【问题标题】:Altering margin in figure tag更改图形标签中的边距
【发布时间】:2012-07-10 06:45:10
【问题描述】:

我刚开始在项目中使用 figure 和 figcaption 标签,但遇到了一个我似乎无法解决的问题。

使用图形标签,以下图像和标题会自动缩进。我有一排带有 h 标签的垂直附加媒体,看起来不错且呈线性,并希望保持这种状态。图形标签的自动缩进会以一种令人不快的方式摆脱它。我使用的是 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 %}

【问题讨论】:

    标签: css html


    【解决方案1】:

    似乎浏览器通常会为图形添加边距。尝试设置 margin:0,像这样:

    figure {margin:0} 
    

    【讨论】:

    • 行得通!了不起!标题与照片的宽度不匹配,但这是另一个问题。
    • 您可以通过添加 display:table;width:1px; 来使您的标题与图像匹配(除了你的边距:0)到图,并显示:表行到图标题。
    • 这可行,但它会将图片缩小到所有相同的非常小的尺寸。
    • 很奇怪,它不应该那样做。你能设置你的代码的 jsfiddle.net 吗?
    • 刚刚添加了一个带有 Django 标签的 sn-p。可以很容易地用图片链接替换:jsfiddle.net/bjAmf
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-16
    • 1970-01-01
    相关资源
    最近更新 更多