0

あなたから次のような回答がありました。「display:block を指定しないと、anchor(a) 要素は display:inline として扱われます。そのため、親のサイズを計算するとき (height はデフォルトで auto)、anchor(a) 要素のパディングは省略されますが、 display:block の場合に含まれます。」

これは正しいように聞こえますが、この要素がインライン要素であるときに、アンカー要素のパディング上部とパディング下部のサイズが li に含まれている理由がわかりません。以前の回答によると、アンカー要素がインライン要素にある場合は、このマークアップのようにアンカー要素の padding-top と padding:bottom を省略すべきです。これは、display:block がコメントアウトされているためです。

このアンカー要素には、ある意味で 2 つの親があります。li 要素はアンカー要素の直接の親であり、ul は li 要素の親であり、ul はアンカー要素の祖先です。

マークアップを実行すると、上部のパディングと下部のパディングが 40px であるため、li 要素の背景が高くなります。ul の高さが計算されるとき、アンカー要素の padding-top と padding-bottom は含まれません。

ここに完全なマークアップとスタイルがあります

<!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>

//トニー

4

1 に答える 1

0

あなたから次のような回答がありました。「display:block を指定しないと、anchor(a) 要素は display:inline として扱われます。そのため、親のサイズを計算するとき (height はデフォルトで auto)、anchor(a) 要素のパディングは省略されますが、 display:block の場合に含まれます。」

それは本当です。あなたの<li>-s 高さは行の高さに基づいています。オーバーフローはデフォルトで visibleであるため、パディングが表示されます。設定した場合 

li {
    overflow: hidden;
}

その後、上下のパディングが消えます。

インラインの置換されていない要素の高さに関する仕様:

インラインの置換されていないボックスの垂直方向のパディング、ボーダー、およびマージンは、コンテンツ領域の上部と下部から始まり、「行の高さ」とは関係ありません。ただし、ライン ボックスの高さを計算するときは、'line-height' のみが使用されます。

ブロックの高さの計算に関する仕様:

通常のフローの子のみが考慮されます (つまり、フローティング ボックスと絶対配置ボックスは無視され、相対配置ボックスはオフセットなしで考慮されます)。子ボックスは無名ブロック ボックスの場合があることに注意してください。

したがって、ul は height: 0 を取得します。この問題にはいくつかの解決策があります。 quirksmodeでそれらを参照してください。

于 2013-08-11T13:45:04.903 に答える