如何去除图像的外部缩进？

Question

image

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>。要去除图像外部的白色 space，您只需要在 <body>.

上添加 margin: 0;

为了展示其工作原理，运行下面的代码片段和 select 右上角的完整页面选项。

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>

如果您有任何问题或者我误解了您的意思，请告诉我post。

如何去除图像的外部缩进？

How to remove the outer indentation of the image?

css

background

sass

background-image