Html CSS边框底部获取元素之间的空间

我正在一个侧边栏上工作，在“li”的内部有“a”元素，在它们上面应用CSS代码，并给它们加上边框。但是，当我在“a”元素上应用底部边框时，元素之间的间距也会受到影响。我如何删除它们之间的空间？谢谢

侧边栏图像链接：

代码[html]：

<div id="container">
        <div class="sidebar">
            <ul id="nav">
                <li><a href="#" class="selected">Dashboard</li>
                <li><a href="#">Booter Hub</li>
                <li><a href="#">Stresser</li>
                <li><a href="#">Friends</li>
                <li><a href="#">Search</li>
                <li><a href="#">Purchase</li>
            </ul>
        </div>
        <div class="content">

---

}第一件事。。关闭

a

标签

<li><a href="#" class="selected">Dashboard</a></li>

在这里你需要小心一点。首先，将父

ul

元素的边距和填充置零（这也将使

li

子元素的边距和填充置零）

然后，您可以根据设计需要将样式添加到

a

元素中

#导航{
保证金：0；
填充：0；
列表样式：无；
}
#李海军{
边框：1px点蓝色；
}
#李娜{
显示：块；
填充：10px；
边框底部：1px纯红；
背景颜色：米色；
)

您的请求不清楚，但听起来好像您建议添加边框会增加元素的高度

要使边框/填充包含在整体元素维度中，可以使用

框大小：边框框

css属性

框大小属性用于更改用于计算元素宽度和高度的默认CSS框模型。可以使用此属性模拟不正确支持CSS框模型规范的浏览器的行为

示例

box-sizing: content-box;
box-sizing: padding-box;
box-sizing: border-box;
box-sizing: inherit;

边框框

宽度和高度属性包括填充和边框，但不包括边距。这是Internet Explorer在文档处于怪癖模式时使用的框模型。注意：填充和边框将位于框内，例如，如果.box{width:350px}；则应用{border:10px纯黑；}结果{在浏览器中呈现}。box{width:350px；}

---

框大小：边框框；关闭你的

标签…你能为#容器和#侧边栏添加CSS吗？你能把你的代码放在一个工作的提琴中，而不是链接到一个图像，否则就无法复制。我认为OP也触发了一个折叠边距效果，添加底部边距可以防止边距折叠围绕着

a

和

li

元素。哇，那真是太愚蠢了哈…是的，这就是问题所在。谢谢你，很抱歉这个问题太平庸了。

box-sizing: content-box;
box-sizing: padding-box;
box-sizing: border-box;
box-sizing: inherit;