【前端学习】CSSimg元素底下空间问题解决

棋小仙

已于 2022-12-17 18:49:11 修改

阅读量243

点赞数 1

分类专栏： Web前端文章标签：前端学习 css

于 2022-12-17 18:48:00 首次发布

本文链接：https://blog.csdn.net/qq_43741689/article/details/128355940

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSSimg元素底下空间问题解决

在默认情况下，块级容器会被其内容撑开，但是当我们在使用img元素时，却会发现，img元素的底部多了一块空间

img底下多出空间那么为什么会出现这个空间呢？

后来在查看官方文档的时候了解到如下内容：

In inline layout, a mixed, recursive stream of text and inline-level boxes forming an inline formatting context within a block container are laid out by fragmenting them into a stack of line boxes. Within each line box, inline-level boxes are aligned to each other along the block axis, typically by the baselines of their text.

翻译过来是:在行内的布局中，一个由混合，递归的文本流以及行内级的盒子在一个块容器内形成的一个行内上下文(意思是指一行元素)，是通过将他们碎片化的放入一个行盒栈中，来完成布局的。在每个行盒中，行内级盒子沿着块轴互相排列，默认是通过他们文本的基线对齐来进行排列的

行盒的详细介绍可以看官方文档: https://www.w3.org/TR/css-inline-3/

通过官方文档的说明可以看出来，行内元素每一行都有一个叫做行盒的区域进行包裹，在这个行盒中的这一行元素默认是基线对齐，而img元素的基线是其底部，所以在基线对齐时底部下面还有一部分内容。

我们可以写几个字母试试:

行内元素在行盒内垂直方向基线对齐示例1

加入其他的行内块试试:

行内元素在行盒内垂直方向基线对齐示例2

通过上面的对比就可以看出来官方文档说的是啥意思了。

那么最后怎么解决图片底下有空白的问题呢？

很简单，只需要改变其垂直方向对齐方式就行。

通过vertical-align属性可以改变其对齐方式

img底部空间处理方法
这样就能解决img元素底下多出空间的问题

本文涉及的全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{   
      background-color: #af0;
    }
    .container img{
      width: 300px;
      vertical-align: top;
    }
    .container span{
      width: 100px;
      height: 100px;
      background-color: #faa;
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>
<body>
  <div class="container">
    abcxyz
      <img src="./img/hashiqi.jpg" alt="">  
      <span>
        这是带字的行内块
      </span>
      <span></span>
  </div>
</body>
</html>