两个span之间的间距怎么解决掉？

最新推荐文章于 2022-04-12 23:29:23 发布

海边、lucky

最新推荐文章于 2022-04-12 23:29:23 发布

阅读量9.9k

点赞数 1

分类专栏：前端样式文章标签：前端

本文链接：https://blog.csdn.net/qq_37338658/article/details/87347455

版权

前端样式专栏收录该内容

5 篇文章 0 订阅

订阅专栏

去除span元素之间的间距

思路：将父元素字体大小设置为0，子元素中设置字体正确大小，即可实现效果。至于原理嘛，就是行内元素之间存在空格,空格占有一定的位置由字体大小决定。由于字体大小的可继承性，可设置父级元素字体大小

div{
   font-size:0;
}
div span {
   font-size:16px;
}

如下地址和冒号处于同一div中，但两个是不同的span中，使用上述方法修改后效果前后对比
修改前：
在这里插入图片描述
修改后：冒号离得更近一些了

这里说明一下为啥冒号要和文字分开写在不同的span中，因为要实现和其他文字两端对齐效果，冒号不能加入对齐效果中

下面是该对齐样式的实例css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>css两端对齐</title>
</head>
<body>
   <div class="line">
      <div class="public">性别</div>
      <span>:</span>
      <span class="content">aaaaaa</span>
   </div>
   <div class="line">
      <div class="public">政治面貌</div>
      <span>:</span>
      <span class="content">aaaaaa</span>
   </div>
   <div class="line">
      <div class="public">职务</div>
      <span>:</span>
      <span class="content">aaaaaa</span>
   </div>
</body>
</html>
<style>
.line {
   width:100%;
   height:16px;
   margin:5px;
   background-color: #fff;
   font-size: 0;
}
.line .public {
   font-size: 16px;
   width:80px;
   height: 100%;
   display:inline-block;
   text-align: justify;
   vertical-align:top;
}
/* 使用伪元素配合 text-align: justify;实现文本两端对齐 */
.line .public::after{
   content:"";
   display: inline-block;
   width:100%;
   overflow:hidden;
   height:0;
}
.line span {
   font-size: 16px;
}
.line .content {
   margin-left: 20px;
}
</style>