时间戳

首页 > 解决方案 > 为什么带有“display:inline;line-height:0”的元素中的文本在不同的行中仍然有不同的 yAxis 位置？

html - 为什么带有“display:inline;line-height:0”的元素中的文本在不同的行中仍然有不同的 yAxis 位置？

问题描述

下面代码的高度将超出单行“a”

<span style="display:inline;line-height:0;">aaaaaaaaaaaaaaaaaaaaaa</span>

下面代码的高度将保持不变，与单行'a'的高度相同

<span style="display:inline-block;line-height:0;">aaaaaaaaaaaaaaaaaaaaaa</span>

下面的代码显示了两种外观

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .parent{
            border:1px solid red;
            margin:100px;
            width: 300px;    
        }
        .child1{
            display:inline;
            line-height:0;
            font-size: 50px;
            word-break: break-all;
        }
        .child2{
            display:inline-block;
            line-height:0;
            font-size: 50px;
            word-break: break-all;
        }       
    </style>
    <div class="parent">
        <span class="child1">aaaaaaaaaaaaaaaaaaaaaa</span>        
    </div>
    <div class="parent">      
        <span class="child2">aaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</body>
</html>

标签： htmlcss

解决方案

要获得相同的结果，您需要将相同的font-size和line-height应用于父容器

.parent {
  border: 1px solid red;
  margin: 100px;
  width: 300px;
}

.child1 {
  display: inline;
  /*line-height:0;
   font-size: 50px;*/
  word-break: break-all;
}

.child2 {
  display: inline-block;
  line-height: 0;
  font-size: 50px;
  word-break: break-all;
}
<div class="parent" style="line-height:0;font-size: 50px;">
  <span class="child1">aaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<div class="parent">
  <span class="child2">aaaaaaaaaaaaaaaaaaaaaa</span>
</div>

使用时，inline-block您正在考虑-block创建一个内部包含文本的块元素，因此您将属性应用于文本（内联元素）的容器（块元素）。

使用时，inline您将属性应用于块元素（parent元素）内的内联元素

所以主要区别在于，在一种情况下，父块元素正在获取样式，而在另一种情况下，它是内联子元素。为了确保两者的行为相同，块父元素需要应用样式。

这是差异的更好可视化：

.box {
  border: 1px solid red;
  margin: 50px;
  width: 300px;
  word-break: break-all;
}
<div class="box" style="line-height:0;font-size: 50px;">
  <span >aaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<div class="box">
  <span style="line-height:0;font-size: 50px;">aaaaaaaaaaaaaaaaaaaaaa</span>
</div>

推荐阅读