Question

margin：0和padding：0不起作用

SCSS代码我输入SCSS代码是因为CSS代码在一行中

body{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;


}

    header{
width: 100%;
display: flex;
justify-content: flex-end;
background: url("img/main-img.jpg") no-repeat;
background-size: 100% 680px;
height: 680px;

HTML代码

    <nav>
        <ul>
            <li>Home</li>
            <li>Feautures</li>
            <li>Demos</li>
        </ul>
    </nav>

</header>

Answer 1

我猜您是在margin: 0;元素中插入了padding: 0;和<header>而不是您的<body>。要摆脱图像外部的空白，您只需在margin: 0;上使用<body>。

要显示其工作原理，请运行下面的代码片段，然后在右上角选择整页选项。

body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
 
  /* The solution */
  margin: 0;
}

header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  
  /* Changed for example */
  background: url("https://static.structube.com/media/catalog/product/cache/1/thumbnail/900x698/9a534115b6b626c8b0e5bcde0743ce76/0/1/01-01.71.76.70_plant_cereus.jpg") no-repeat;
  background-size: cover;
  background-position: top center;
  
  height: 680px;
}

<header>
  <nav>
    <ul>
      <li>Home</li>
      <li>Feautures</li>
      <li>Demos</li>
    </ul>
  </nav>
</header>

如果您有任何疑问或我误解了您的信息，请告诉我。

如何删除图像的外部凹痕？

1 个答案: