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

前端样式 专栏收录该内容
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>
  • 0
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值