CODEWITHSUNDEEP
cssreactjs
Helcio Oliveira
Helcio Oliveira

Reputation: 34

Element is getting a margin at the bottom undesired

    .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;

    }

    }
}

i'm getting a margin below the image that i can't get off. I want the image to stay at the size of the bottom of the screen, not to make the user scroll.

It should not have any margin or scrolling. I want to fit the image exactly at the bottom of the screen enter image description here

Upvotes: 0

Views: 45

Answers (1)

nonopolarity
nonopolarity

Reputation: 150986

One possible reason is that your body has a margin on all directions. You can use

body { margin: 0 }

to remove it and try again. Also, inspect your element using the developer's tool to look at the computed width and height for the html, body, and the containers down to your img. Look at the values (and also check for margin and padding), and especially, the height and vertical margin and padding if the image is scrolling.

You can also use calc():

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

so that your image is not as tall.

Upvotes: 1

Related Questions