时间戳

首页 > 解决方案 > 如果将边距和填充设置为 0 不起作用，如何删除容器左侧的额外空间？

html - 如果将边距和填充设置为 0 不起作用，如何删除容器左侧的额外空间？

问题描述

我正在尝试创建一个导航栏，但无法摆脱徽标容器左侧的额外空间。我怎样才能删除这个空间？

我尝试将边距和填充设置为 0，但均未成功。

这是我正在谈论的图像。我添加了红色边框，以便更容易理解容器的位置：

这是我正在谈论的图像。 我添加了红色边框，以便更容易理解容器的位置

输出应该在菜单容器的左侧一直有徽标。不应该有多余的空间。

.center-container{
   max-width: 960px;
   margin: 0 auto;
   margin-top: 1rem;
}

menu{
   background-color: cadetblue;
   display: flex;
   justify-content: space-between;
}

.logo{
   height: 1.5rem;
   margin-right: 1rem;
}

.logo-container{
   display: flex;
   align-items: center;
}
<header>
  <menu class="center-container">
    <div class="logo-container">
      <img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/tortoiseshell-optics/resources/images/logo-white.png">
      <span>Tortoiseshell Optics</span>
    </div>
  </menu>
</header>

标签： htmlcssflexbox

解决方案

<menu>元素的样式通常被<ul>浏览器设置为具有左填充的元素。删除它，你就摆脱了空间：

.center-container {
  max-width: 960px;
  margin: 0 auto;
  margin-top: 1rem;
}

menu {
  background-color: cadetblue;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}

.logo {
  height: 1.5rem;
  margin-right: 1rem;
}

.logo-container {
  display: flex;
  align-items: center;
}
<header>
  <menu class="center-container">
    <div class="logo-container">
      <img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-5/tortoiseshell-optics/resources/images/logo-white.png">
      <span>Tortoiseshell Optics</span>
    </div>
  </menu>
</header>

另请注意，对的支持<menu>非常有限。

推荐阅读