Html 文本和边框之间的间距

我使用填充顶部在li和它的边界之间留出空间，但它移动了所有导航栏的位置

有没有办法在不移动的情况下腾出空间

nav{
浮动：对；
宽度：80%；
字号：80%；
文本对齐：右对齐；
}
李海军{
显示：内联块；
列表样式类型：无；
利润率：2.5%；
填充：0.5%；
}
李娜{
颜色：#6464；
字体大小：粗体；
文字装饰：无；
}
李海军，主动，
李导航：悬停{
边框顶部：3px实心#f0842a；
填充顶部：20px；
}

您可以使用

10px的
margin top
和
10px的
padding top
。这将保持元素的尺寸相同，并且边框将更靠近文本

使用此选项，
li
元素的顶部总空间为
20px


nav{
浮动：对；
宽度：80%；
字号：80%；
文本对齐：右对齐；
}
李海军{
显示：内联块；
列表样式类型：无；
利润率：2.5%；
填充：0.5%；
}
李娜{
颜色：#6464；
字体大小：粗体；
文字装饰：无；
}
李海军，主动，
李导航：悬停{
边框顶部：3px实心#f0842a；
填充顶部：10px；/*使用10px；此处*/
页边距顶部：10px；/*使用10px；此处*/
}









如果所需效果是将active class应用于其中一个菜单项而不移动菜单，则每个列表项应有一个边框顶部，宽度相同，但透明或与背景色相同，当应用活动类时，它只会更改此边框的颜色。
在.nav中添加-20px的边距将取消该删除


nav{
浮动：对；
宽度：80%；
字号：80%；
文本对齐：右对齐；
利润上限：-20px；
}
李海军{
显示：内联块；
列表样式类型：无；
利润率：2.5%；
填充：0.5%；
}
李娜{
颜色：#6464；
字体大小：粗体；
文字装饰：无；
}
李海军，主动，
李导航：悬停{
边框顶部：3px实心#f0842a；
填充顶部：20px；
}










使用负边距是我认为的一个坏习惯这是我的想法，我
已经阅读了许多文章，以及根据您接受的答案
还有另一种方法可以实现这一目标，在这里我给出了答案


nav{
浮动：对；
宽度：80%；
字号：80%；
文本对齐：右对齐；
}
导航ul{
边际上限：0；
}
李海军{
显示：内联块；
列表样式类型：无；
利润率：0.2.5%2.5%2.5%；
填充：0.5%；
}
李娜{
颜色：#6464；
字体大小：粗体；
文字装饰：无；
}
李海军，主动，
李导航：悬停{
边框顶部：3px实心#f0842a；
填充顶部：20px；
}










nav{
浮动：对；
宽度：80%；
字号：80%；
文本对齐：右对齐；
溢出：隐藏；
}
李海军{
浮动：左；
列表样式类型：无；
填充：20px0；
右边距：20px；
边框顶部：3倍纯色透明；
}
李娜{
颜色：#6464；
字体大小：粗体；
显示：块；
文字装饰：无；
}
李海军，主动，
李导航：悬停{
边框顶部颜色：#f0842a；
}









你所说的
移动所有导航栏位置是什么意思
。理想的效果是什么？我只想在边框和文本之间留出空间，而不向下移动导航。它解决了问题，但我想知道使用负边距是否合适？@obk我在许多项目中都使用过它，这是一个简单的解决办法，从来没有任何问题。@williamburgent我想建议你，通常使用负边距是一个坏习惯，所以尽量避免它can@obk请检查一下，你可以通过另一种方式来实现这一点，但它并不像我所看到的那样有效。。负边距给出了更好的结果result@obk嗨，事实上，我错了，我更新了以前的演示，所以没有工作，所以现在编辑了实际的一个，你可以看到它正在工作