Question

我正在尝试为FreeCodeCamp创建一个项目页面。问题是我需要为页面创建一个标题，由于某种原因，我的内容与其各自的容器之间存在很大的差距。

我已经尝试将padding设置为零，调整边距和类似的内容。诸如将“ line-height”更改为0之类的事情使得它可以占用更少的空间，但是容器几乎保持不变。

我为构成我的内容的每个对象的背景设置了一种颜色，以检查它们应该填充的区域并将其与围绕它们的容器的区域进行比较。

以下代码：

@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700&display=swap');
html{
}
#header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;  
  display: flex;
  justify-content: space-between;
  background-color: grey;
  font-family: 'Oxygen', sans-serif;
}
#header-logo{
  display: inline-block;
  background-color: cyan;
}
#img-container{
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: 30px;
  height: 36px;
  background-color: pink;
}
#header-img{
  width: 60px;
  height: 60px;
  margin-left: -15px;
  margin-top: -12px;
}
#header-text{
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 700;
  background-color: pink;
}
#nav-bar{
  display: inline-block;
  background-color: cyan;
}
#nav-list{  
  list-style: none;
  background-color: magenta;
}
.nav-item{
  display: inline-block;
  background-color: pink;
  margin-right: 10px;
}
.nav-item > a{
  wtext-decoration: none;
}
.nav-item:first-letter{
  font-weight: 700;
}

<html>
  <head>
    <title>
    </title>
  </head>
  
  <body>
    <header id="header">
      <div id="header-logo">
        <div id="img-container">
          <image src="https://zapier-dev-files.s3.amazonaws.com/cli-platform/01368c80-24cc-415d-8262-df1c9382ea01" id="header-img">
          </image>
        </div>
        <h1 id="header-text">
          Penguino
        </h1>
      </div>
      <nav id="nav-bar">
        <ul id="nav-list">
          <li class="nav-item">
            <a href="#nav1" id="nav1" class="nav-link"> Home
            </a>
          </li>
          <li class="nav-item">
            <a href="#nav2" id="nav2" class="nav-link"> Products
            </a>
          </li>
          <li class="nav-item">
            <a href="#nav3" id="nav3" class="nav-link"> About
            </a>
          </li>
          <li class="nav-item">
            <a href="#nav4" id="nav4" class="nav-link"> Contact
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <main>
      
    </main>
    <footer>
    
    </footer>    
  </body>
</html>

这是我的密码笔的链接：

https://codepen.io/Navarrox/pen/KKPGrxj

希望有人可以帮助我。谢谢！

编辑：通过将padding-left设置为0，删除了导航栏上的多余洋红色空间。我之前已经做过，但是出于某种原因，我在发布前删除了该行。

Answer 1

将标头徽标容器设置为display:flex，将边距替换为h1的填充。对于右侧导航，将height:100%设置为ul和display:flex。检查此代码笔：

Answer 2

我希望以下帮助：

用于了解页面布局和包含块。点击here
要了解有关块显示的更多信息，请选中here
您还可以签出CSS网格here
网格和弹性框here

Answer 3

您可以尝试增加宽度和高度。只要操纵它，直到它适合您。否则，宽度：100％;

CSS-使容器大小适合内容，删除未使用的空间

3 个答案: