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



image

边距:0 和填充:0 不起作用

SCSS 代码 I 输入 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;

网页代码

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

我猜你已经将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>

如果您有任何问题或我误解了您的帖子,请告诉我。

相关内容

  • 没有找到相关文章

最新更新