我如何修复CSS边界的大小？

Question

我正在学习html，css和javascript，使用在线教程。 bbc徽标旁边的css边框太短。请告诉我为什么。

浏览器：

代码：http://pastebin.com/FWrs084N （此代码将始终存在）

Answer 1

你的衬垫稍微偏了。 Check this fiddle

基本上从

更改logodiv的属性

padding-top: 7px;

到

padding: 6px 80px 12px 20px

为了在将来避免这种情况，您最好添加一个具有相同属性的类名，这样元素就可以获得一致的样式。

Answer 2

body{
  margin:0;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
}

#topbar{
  background-color: #CC0101;
  width: 100%;
  height: 40px;
  color: white;
  margin-top: 10px;
}
.fixedwidth{
  width: 1050px;
  margin: 0 auto;
}              
#logodiv{
  padding-right: 10px;
  border-right: 5px solid #DA4C4C;
}
#signindiv{
  font-weight: bold;
  padding: 0 80px 0 20px;
  font-size: 0.9em;       
  border-right: 5px solid #DA4C4C;
}
#topmenudiv ul{
  margin: 0;
  padding:0;
} 
#topmenudiv li{
  list-style: none;
  font-weight: bold;
  font-size: 0.9em;
  border-right: 5px solid #DA4C4C;
  height: 100%;
  padding: 0 20px 8px 20px;
}
.fixedwidth > div {
  display: table-cell;
  vertical-align: middle;
}

<div id="container">
  <div id="topbar">

    <div class="fixedwidth">

      <div id="logodiv">
        <img src="images/logo.png"/>
      </div>

      <div id="signindiv">
        <img src="images/signin.png"/> Sign in
      </div>

      <div id="topmenudiv">
        <ul>
          <li>News</li>
          <li></li>
          <li></li>
        </ul>
      </div>

    </div>

  </div>
</div>

祝你好运！