问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何去掉<figcaption>之前空白？

头像
xparmenides
    85

    在写网页的时候发现浏览器会在figcaption和它前面的元素之间留出一段空白，源代码如下和页面显示效果如下所示。请问如何把这段空白去掉？

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Linux操作系统</title>
        <style>
            figure {
                display: inline-block;
            }
            
            figure * {
                border: 1px dashed red;
            }
        </style>
    </head>
    <body>       
        <figure>
            <img src="linux.png" />
            <figcaption>Linux操作系统</figcaption>
        </figure>
    </body>
</html>

    image

    前端css
    阅读 2k
    2 个回答
    得票最新
    头像
    linong
      29.2k1368137
      ✓ 已被采纳
      • 方案一：修改 font-size 为 0;
        image.png
      • 方案二：不使用 inline 模式，比如 block、flex、grid，都是可以的
        image.png
      • 方案三：修改对齐方式+调整行高。
        image.png

      感觉和行内标签出现空白格问题是一致的，比如：

      • 两个 img 中间出现了一个空白格
      • video标签下方出现空白区域
      头像
      xparmenides
        85

        我猜是浏览器自作主张加上的空白，但如果是这样，通过magin或padding应该能去掉的。我试了一下如果<figure>里的元素是图像就去不掉，如果是其他元素（例如段落）就可以去掉。

        <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>页面标题</title>
        <style>
            figure * {
                border: 1px dashed red;
            }
            
            figure {
                display: inline-block;
            }
            
            p {
                width: 150px;
                height: 150px;
                margin-bottom: 0;
            }
        </style>
    </head>
    <body>
        <figure>
            <p></p>
            <figcaption>一个段落</figcaption>
        </figure>
    </body>
</html>

        image

        目前应该知道问题的原因：图像的底边与x字符的基线对齐，所以图像下方留出半个x高度的空白。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题