Question

我收到了你的答复，说明如下。 “没有display：block，anchor（a）元素被视为display：inline。因此，当计算父元素的大小时（height默认为auto），锚点（a）元素的填充被省略，而它包含在display：block中。“

这个声音正确但我无法理解为什么当这个元素是内联元素时，li包括填充元素的填充顶部和填充底部的大小。我的意思是根据你之前的回答，当锚元素在内联元素中时，应该省略padding-top和padding：bottom元素的底部，因为它在这个标记中显示：block是注释掉的。

这个锚元素在某种程度上有两个父母。 li元素是anchor元素的直接父元素，ul是li元素的父元素，ul是anchor元素的祖先元素。

如果我运行标记，则li元素的背景更高，因为填充顶部和40px的填充底部。当计算ul的高度时，它不包括锚元素的填充顶部和填充底部。

这是完整的标记和样式

<!DOCTYPE html>
<html>
<head>

   body
   {
      font-family:Arial, sans-serif;
      font-size:small;
      width:820px;
      margin:0;
      padding:0;
   }

   #nav
   {
       float:left;
       width:100%;
       margin:0;
       padding:10px 0 0 46px;
       list-style:none;
       background:#FFCB2D;
   }

   #nav li
   {
      float:left;
      margin:0 1px 0 0;
      font-family:"Lucida Grande", "sans-serif";
      font-size:90%;
      background:red;
   }

   #nav a
   {
       /*display:block;*/
       margin:0;
       padding:10px 8px;
       color:#333;
       text-decoration:none;
       border:1px solid #9B8748;
       border-bottom:none;
       background:#F9E9A9;
   }

    #nav a:hover
   {
       color:#333;
       padding-bottom:5px;
       border-color:#727377;
      background:#fff;
   }

<meta charset="utf-8" />
<title>Chapter 3</title>
</head>
<body>
<ul id="nav">
  <li id="t-intro"><a href="/">Introduction</a></li>
  <li id="t-about"><a href="about.html">About Lance</a></li>
  <li id="t-news"><a href="news.html">News &amp; Events</a></li>
  <li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li>
</ul> 
</body>

//托尼

Answer 1

我收到了你的答复，说明如下。 “没有display：block，anchor（a）元素被视为display：inline。因此，当计算父元素的大小时（height默认为auto），锚点（a）元素的填充被省略，而它包含在display：block中。“

确实如此。您的<li> - s高度取决于行高。你看到填充因为overflow defaults to visible。如果你设置

li {
    overflow: hidden;
}

然后顶部和底部填充消失。

Specification关于内联非替换元素的高度：

内联，未替换框的垂直填充，边框和边距从内容区域的顶部和底部开始，与“行高”无关。但是在计算线框的高度时只使用“线高”。

关于计算块高度的

Specification：

仅考虑正常流量中的儿童（即，忽略浮动框和绝对定位的框，并且考虑相对定位的框而没有它们的偏移）。请注意，子框可能是匿名阻止框。

所以你的ul得到高度：0。这个问题有几个解决方案，请在quirksmode上查看。

当锚是内联元素时，为什么li元素计算高度

1 个答案: