<div> 顶部的额外间距

Question

无法弄清楚为什么会有额外的间距。花了很多时间试图弄清楚 CSS 样式，但没有运气。我怎样才能让“BBC”垂直居中于它旁边的线（即在盒子的中间而不是中心）

此外，如果您在小提琴中取消注释第 10 行，它的行为将完全不同。你能解释一下为什么会这样吗？

jsfiddle

<div class="container top-nav-bar">

    <div class="top-nav-logo-area">
        <span class="logo">B</span>
        <span class="logo">B</span>
        <span class="logo">C</span>
    </div>

    <div class="top-nav-link-div">
    <!--<a class="black-nav-links" href="#">Sign in</a>-->

    </div>


      html,body,p {
    margin: 0;
    padding: 0;
  }

   .container {
        width: 1000px;
        margin: 0 auto;
    }

    .top-nav-bar {
        height: 40px;
    }

    .top-nav-logo-area {
        display: inline-block;
        margin-right: 20px;
    }

    .logo {
        background-color: black;
        color: white;
        font-family: monospace;
        font-size: 25px;
    }

    .top-nav-link-div {
        display: inline-block;
        height: 100%;
        border-left: 1px grey solid;
        font-weight: bold;
        font-family: sans-serif;
        font-size: 12px;
        color: black;

    }

Answer 1

在 jsfiddle 中尝试这些更改

.top-nav-bar {
    border-bottom: 1px solid #cccccc;
    height: 35px;
}
.top-nav-logo-area {
    display: block;
    margin: 12px;
}

Answer 2

根据您的所有要求，我建议您删除导航栏中的“高度”设置。您需要添加和调整边距和填充以使徽标均匀放置，并且还需要使用“位置：相对；”在容器和“登录” div 上，以准确放置在垂直中间。

这是一个 jsFiddle。

http://jsfiddle.net/deborah/t8oyLprs/1/

这里是 CSS。如果您正在构建一个完整的网站并尝试自定义 Bootstrap，您将受益于 Google 搜索 CSS 教程并浏览它们。

   html,body,p {
        margin: 0;
        padding: 0;
   }

   .container {
        width: 100%;
        margin: 0 auto;
    }

    .top-nav-bar {
        /* remove the height and let the margins/paddings on the child divs set it */
        border-bottom: 1px #cccccc solid;
    }

    .top-nav-logo-area {
        display: inline-block;
        position: relative; /* makes this container accept positions for the child div */
        margin: 10px; /* equal margin around the logo centers it vertically */
        padding: 10px 20px 10px 10px; /* padding top and bottom centers the border */
        border-right: 1px solid #cccccc;
    }

    .top-nav-logo-area:after {
      content: '';
      display: table;
      width: 100%;
    }

    .logo {
        background-color: black;
        color: white;
        font-family: monospace;
        font-size: 25px;
    }

    .top-nav-link-div {
        display: inline-block;
        height: 100%;
        border-left: 1px grey solid;
        font-weight: bold;
        font-family: sans-serif;
        font-size: 12px;
        color: black;
        position: relative; /* necessary for positioning */
          top: -5px; /* the position adjustment */

    }

您的注释行包含“登录”文本，该文本也使用了该区域的 CSS。这就是为什么当您将其注释掉时布局会发生变化。将 HTML 放在评论中告诉浏览器，“忽略这个”。

Answer 3

为了使容器中的 div 在页面上水平居中，请执行此操作。

.container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}