css - 元素在底部不希望有边距

Question

    .home{
        height: 100vh;
        &__logo{
            margin: 5vh auto 4.5rem auto;
            display: flex;
            justify-content: center;
            svg{
             height: 2rem;
            }
        }
    &__container{
        display: flex;
        flex-direction: column;
    }

    &__text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-position: left;
        align-items: center;
        &--h1{
         margin: 2rem 1.5rem;
         text-align: center;

        }
        &--btn{
            button{
              padding:1.2rem 3rem;
            }
        }


    }

    &__img{
        margin-top: 5rem;
        width: 95vw;
        position: relative;
        right: 2rem;
        height: 60vh;

      img{
        width: 100%;
        height: 100%; 
      }

    &--1{
        display: none;

    }

    }
}

我在图像下方得到了一个边缘，我无法摆脱。我希望图像保持在屏幕底部的大小，而不是让用户滚动。

它不应该有任何边距或滚动。我想让图像恰好位于屏幕底部

Answer 1

一个可能的原因是您的 body 在所有方向上都有一个 margin。你可以使用

body { margin: 0 }

删除它并重试。此外，使用开发人员工具检查您的元素，以查看 html、body 和容器的计算宽度和高度，直至您的 img。查看值(并检查边距和填充)，尤其是图像滚动时的高度和垂直边距和填充。

你也可以使用calc():

img { height: calc(100% - 16px) }

这样你的头像就没那么高了。