为什么 HTML 实体会扩大它的父亲 HTML 元素？

Question

我制作了一个简单的 2 层导航菜单，只有一个下拉菜单。我在该 2 层下拉菜单中添加了一个 🢓 实体，它正在扩大其包含元素。没有 margin/padding/border 导致此问题。有没有办法在不删除 HTML 实体的情况下解决这个问题？

nav#menu ul {list-style-type: none; position: relative; padding: 0;}
nav#menu ul li {float: left;width: 190px;}
nav#menu ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 1rem 0;
    background-color: cornflowerblue;
    color: white;
    border-right: 2px solid white;
    border-top: 2px solid white;
    font-family: sans-serif;
    font-weight: bold;
}
/* appears when floating */
nav#menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
}
nav#menu ul ul li a{
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: cornflowerblue;
    color: white;
    padding: 1rem 0;
    font-family: sans-serif;
    font-weight: bold;
}
nav#menu ul ul li {
    float: none;
    width: 190px;
    padding: 0;
}
nav#menu ul li:hover > ul {
    display: block;
}
nav#menu > ul::after {
    content: "";
    display: block;
    clear: both;
}
.level2 li {
    border-top: 2px solid white;
}
nav#menu a:hover, nav#menu a:focus{background-color:rgb(45, 114, 241);}

<!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">
    <link rel="stylesheet" href="styles.css">
    <title>Navigation Menu</title>
</head>
<body>
    <nav id="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Menu &#129171;</a>
            <ul class="level2">
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Help</a></li>
          <li class="lastitem"><a href="#">About</a></li>
        </ul>
      </nav>
</body>
</html>

Answer 1

是的，有。放大是由于字符实体的字形是从具有不同字体规格的不同字体绘制的。

我建议做的是将实体引用放在一个跨度中，并为跨度指定一个最小行高。像这样：

nav#menu ul {list-style-type: none; position: relative; padding: 0;}
nav#menu ul li {float: left;width: 190px;}
nav#menu ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 1rem 0;
    background-color: cornflowerblue;
    color: white;
    border-right: 2px solid white;
    border-top: 2px solid white;
    font-family: sans-serif;
    font-weight: bold;
}
nav#menu ul li a span { /* <== the added rule */
  line-height:1px;
}
/* appears when floating */
nav#menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
}
nav#menu ul ul li a{
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: cornflowerblue;
    color: white;
    padding: 1rem 0;
    font-family: sans-serif;
    font-weight: bold;
}
nav#menu ul ul li {
    float: none;
    width: 190px;
    padding: 0;
}
nav#menu ul li:hover > ul {
    display: block;
}
nav#menu > ul::after {
    content: "";
    display: block;
    clear: both;
}
.level2 li {
    border-top: 2px solid white;
}
nav#menu a:hover, nav#menu a:focus{background-color:rgb(45, 114, 241);}

<!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">
    <link rel="stylesheet" href="styles.css">
    <title>Navigation Menu</title>
</head>
<body>
    <nav id="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Menu <span>&#129171;</span></a>
            <ul class="level2">
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Help</a></li>
          <li class="lastitem"><a href="#">About</a></li>
        </ul>
      </nav>
</body>
</html>

Answer 2

我加载了您的代码并在浏览器中打开它，所有菜单项的大小都相同。但是，是的，您可以将箭头包裹在 span 标记中，为其分配一个 class，并自定义它以缩小 font-size 或设置 line-height 或任何您想要的真的。

我认为有很多不同的方法可以解决这个问题。

为什么 HTML 实体会扩大它的父亲 HTML 元素？

why is a HTML entity enlarging it's father HTML element?

css

entity