ナビゲーションバーのインラインブロック

Question

以前のスタックオーバーフローの質問とは異なる回答をスクロールした後、これに似たナビゲーションバーコードが表示されました。正常に動作します。

私は、.ulTest liのインラインブロックを使用することで、基本的にナビゲーションバーを水平にしていることを理解しています。しかし、なぜ私はそれがインラインブロックを持っているのかを実際に把握することはできません。私はそれを追加/削除しようとしましたが、それを削除するとナビゲーションバーの高さは小さくなります。誰も私にこの行が実際にやっていることとそのページにどのような影響を与えているのかを説明できますか？アンカー要素はその後、唯一のインラインになるので感謝は:)

.ulTest 
{ 
    text-align: center; 
    list-style-type: none; 
} 
.ulTest li 
{ 
    display: inline-block; 
} 
.ulTest li a 
{ 
    text-decoration: none; 
    padding: 15px 25px; 
    display: inline-block; 
    color:black; 
} 

Answer 1

、ブラウザのデフォルト、およびその高さは、周囲の行ボックスの高さになります。ブロック化することで、その要素の高さを周囲の親要素と同じサイズにすることができますが、「インライン」のようにすべての行を保持します。

だから、あなたのhtmlとcssを持って一緒に置いてください。デベロッパーツールを使用して、アンカー要素のサイズをインラインブロックとインラインブロックの2つに分けてみましょう。ブロックレベルでは、インラインではできない方法で高さと余白とパディングを調整できます。