CSSアンカータグの浮動小数点は、要素をリストアイテムに使用する場合と比べてサイズを大きくします。

Question

アンカータグaにfloatを使用して以下を設定すると、ナビゲーションが増加します（liのみ - 以下を参照）。どうしてこれなの？次のようにリスト項目の上にそれを使用して対

nav { 
 
\t background-color: rgb(25,25,25); 
 
\t border: 1px solid rgba(255,255,255,.5); 
 
\t border-left: none; 
 
\t border-right: none; 
 
} 
 
nav ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t overflow: hidden; 
 
} 
 
nav li { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t list-style: none; 
 
} 
 
nav a { 
 
\t float: left; 
 
\t font-size: .8em; \t 
 
\t color: white; 
 
\t font-weight: normal; 
 
\t text-decoration: none; 
 
\t padding: 10px; 
 
\t border-right: 1px dashed rgba(255,255,255,.75); 
 
\t transition: all .5s; 
 
}

<nav class="clear"> 
 
\t <ul> 
 
\t \t <li><a href="#">About The Book</a></li> 
 
\t \t <li><a href="#">CSS Properties</a></li> 
 
\t \t <li><a href="#">CSS Tips</a></li> 
 
\t \t <li><a href="#">CSS Gotchas</a></li> 
 
\t \t <li><a href="#">Contact Us</a></li> 
 
\t </ul> 
 
</nav>

、メニューには、高さに

nav { 
 
\t background-color: rgb(25,25,25); 
 
\t border: 1px solid rgba(255,255,255,.5); 
 
\t border-left: none; 
 
\t border-right: none; 
 
} 
 
nav ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t overflow: hidden; 
 
} 
 
nav li { 
 
\t float: left; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t list-style: none; 
 
} 
 
nav a { 
 
\t font-size: .8em; \t 
 
\t color: white; 
 
\t font-weight: normal; 
 
\t text-decoration: none; 
 
\t padding: 10px; 
 
\t border-right: 1px dashed rgba(255,255,255,.75); 
 
\t transition: all .5s; 
 
}

<nav class="clear"> 
 
\t <ul> 
 
\t \t <li><a href="#">About The Book</a></li> 
 
\t \t <li><a href="#">CSS Properties</a></li> 
 
\t \t <li><a href="#">CSS Tips</a></li> 
 
\t \t <li><a href="#">CSS Gotchas</a></li> 
 
\t \t <li><a href="#">Contact Us</a></li> 
 
\t </ul> 
 
</nav>

Answer 1

aを増加させない、デフォルトではインライン要素であります。インライン要素の垂直パディングはレイアウトには影響しません。つまり、行の高さ（または浮動小数点のli要素の親の線の高さ）に影響を与えずにa要素のクリック領域を増加させます。しかしulにはoverflow: hiddenがあり、a要素に垂直パディングがクリップされます。つまり、垂直パディングで提供されるこの余分なクリック領域を実際に使用することは決してありません。

インラインボックスをフローティングするとブロックボックスになります。したがって、ブロックボックス（浮動小数点または浮動小数点数）で予想されるように、垂直パッドが各a要素のレイアウトに影響します。

Answer 2

アンカータグ（<a>）が最初はinlineの要素であり、パディングの影響を受けないからです。それらを浮動させると、少し異なるように振る舞います。inline-blockのようになりますが、それはパッディングがボックスモデルに描画されることになります。

Answer 3

あなたはこの問題を回避する方法を探している場合：

は間隔がフロートを使用せずようになり得るために、あなたのnav aにdisplay: blockまたはinline-blockを適用します。

nav { 
 
\t background-color: rgb(25,25,25); 
 
\t border: 1px solid rgba(255,255,255,.5); 
 
\t border-left: none; 
 
\t border-right: none; 
 
} 
 
nav ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t overflow: hidden; 
 
} 
 
nav li { 
 
\t float: left; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t list-style: none; 
 
} 
 
nav a { 
 
\t font-size: .8em; \t 
 
\t color: white; 
 
\t font-weight: normal; 
 
\t text-decoration: none; 
 
\t padding: 10px; 
 
\t border-right: 1px dashed rgba(255,255,255,.75); 
 
\t transition: all .5s; 
 
     display: inline-block; 
 
}

<nav class="clear"> 
 
\t <ul> 
 
\t \t <li><a href="#">About The Book</a></li> 
 
\t \t <li><a href="#">CSS Properties</a></li> 
 
\t \t <li><a href="#">CSS Tips</a></li> 
 
\t \t <li><a href="#">CSS Gotchas</a></li> 
 
\t \t <li><a href="#">Contact Us</a></li> 
 
\t </ul> 
 
</nav>

Answer 4

理由は、 "アンカー" タグはインライン要素であるということです。パディングはインライン要素には影響しません。したがって、あなたが書くとき

padding=10px 

アンカータグのパディングには何の影響もありません。

しかし、すべてのインライン要素は、それらに「float」プロパティを使用するとブロックレベルの要素として機能します。したがって、アンカータグに "float = left"と書くとすぐに、ブロックレベルの要素として機能し始めます。だから、今では詰め物が効いています。これはブロックレベルの要素ではないため、アンカータグにはパディングが影響することを意味します。

一方、「li」の場合は、パディングは何も記述していません。 float = leftの場合でも、それはそのままです。

私はこれが役に立ちそうです。