インライン要素のパディング: 効果と制限

ソースによると、インライン要素の上部と下部にパディングを追加しても影響はありません周囲の要素の間隔。ただし、「パディングは他のインライン要素と重なる」という記述は、パディングが影響を与える特定の状況がある可能性があることを示唆しています。

オーバーラップ パディングについて

パディングは主に適用される要素の垂直方向の境界線が増加します。通常の状況では、隣接するインライン要素はパディングされた要素の周囲を流れることができるため、これらの要素との重なりは生じません。ただし、周囲の要素もインライン要素である場合、それらの固有の間隔は変更される可能性があります。

たとえば、デフォルトの間隔を持つ 2 つの隣接するインライン要素を考えてみましょう。それらのいずれかに上下のパディングを適用すると、パディングがその境界線を超えて拡張され、パディングされた要素が他の要素と重なる可能性があります。これにより、要素が混雑していたり​​位置がずれて見える可能性があるため、ページのレイアウトに視覚的に影響を与える可能性があります。

インライン ブロックを使用してパディングの競合を解決する

パディングの競合を回避するにはinline 要素では、display: inline-block プロパティを使用できます。これにより、要素の垂直方向の配置を制御し、隣接する要素との重なりを防ぐことができます。

inline-block を使用するには、次のプロパティを要素に適用します。

display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;

これらのプロパティにより、周囲のインライン コンテンツのフローを中断することなく、パディングされた要素がブロック レベルの要素のように動作することが保証されます。これにより、パディングが隣接する要素と重ならないようになり、望ましいレイアウトと外観が維持されます。