Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
257 views
in Technique[技术] by (71.8m points)

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

在写网页的时候发现浏览器会在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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
  • 方案一:修改 font-size 为 0;
    image.png
  • 方案二:不使用 inline 模式,比如 block、flex、grid,都是可以的
    image.png
  • 方案三:修改对齐方式+调整行高。
    image.png

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...