Question

我正在边栏工作，我在那里＆＃39; a＆＃39;里面的元素，在它们上面应用CSS代码，并给它们边框。但是，当我在＆＃39; a＆＃39;上应用边框底部时。元素，元素之间的空间也受到影响。如何删除它们之间的空格？感谢。

代码[html]：

height

代码[CSS]：

<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">

}

Answer 1

你需要在这里小心一点。首先，将父ul元素的边距和填充清零（对于li子元素也将其清零）。

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

#nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav li {
  border: 1px dotted blue;
}
#nav li a {
  display: block;
  padding: 10px;
  border-bottom: 1px solid red;
  background-color: beige;
)

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

Answer 2

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

要将border / padding包含在整个元素维度中，您可以使用box-sizing:border-box css属性。

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

<强>实施例

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

<强> 边界框

width和height属性包括填充和边框，但不包括边距。这是文档处于Quirks模式时Internet Explorer使用的框模型。注意：填充＆amp;边框将在框内，例如IF .box {width：350px};那么你应用{border：10px solid black;} RESULT {在浏览器中呈现} .box {width：350px;}

Box-sizing @ MDN

Answer 3

第一件事......关闭a标签......

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

完成后，您将获得以下结果（我已移除ul list-style，margin和padding，我假设您已完成相同的操作在其他代码中没有分享问题）...

＆＃13;

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#nav li a {
  border: 1px solid pink;
}

#nav li a {
  text-decoration: none;
  color: #ccc;
  display: block;
  padding: 10px;
  font-size: 0.8em;
  border-bottom: 1px solid #0A0A0A;
}

＆＃13;

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

＆＃13;

*请记得添加text-decoration: none;以删除默认a标记下划线。

CSS border-bottom获取元素之间的空间

3 个答案: