Button is not inline with the image-CodePudding

I am adding a button that overlaps an image and for some reason, the button is displaying a bit below my image. I want it to perfectly fit on top of the image. I've tried playing with the margins but can't find what the issue might be. Any suggestions? I have added pictures below and a link to my code on fiddle

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lemon&family=Open Sans:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #38afff;
  --first-color-alt: hsl(204, 94%, 52%);
  --title-color: hsl(233, 32%, 15%);
  --text-color: hsl(233, 4%, 35%);
  --body-color: #daeef6;

  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Open Sans', sans-serif;
  --second-font: 'Lemon', cursive;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

  
img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none

}

/* Responsive typography */
@media screen and (min-width: 1224px) {
  :root {
    --biggest-font-size: 3.5rem;
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
  overflow-x: hidden;
  position: relative;
}



img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.main {
  overflow: hidden; /* For the animations */
}

.section__blog {
  padding: 4.5rem 0 2rem;
}

.container__blog {
  max-width: 1024px;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.grid__blog {
  display: grid;
  gap: 1.5rem;
}



/*=============== BLOG ===============*/
.blog__container {
  padding-bottom: 2rem;
}

.blog__content {
  row-gap: 3rem;
}

.blog__image {
  position: relative;
  margin-bottom: 1.5rem;
}

.blog__img {
  border-radius: .5rem;
  box-shadow: 0 4px 16px hsl(355deg 25% 15% / 10%);
}

.blog__button {
  display: inline-flex;
  background-color: #fff;
  padding: 1.15rem;
  border-radius: .5rem 0 .5rem 0;
  font-size: 2rem;
  color: var(--title-color);
  position: absolute;
  right: 0;
  bottom: 0;
  
}

.blog__button i {
  transform: rotate(-30deg);
  transition: .4s;
}

.blog__button:hover i {
  transform: rotate(-30deg) translateX(.25rem);
}

.blog__title {
  font-size: var(--h2-font-size);
  margin-bottom: .75rem;
}

.blog__description {
  margin-bottom: 1.5rem;
}

.blog__footer, 
.blog__reaction {
  display: flex;
  align-items: center;
}

.blog__footer {
  column-gap: 1.5rem;
}

.blog__reaction {
  column-gap: .25rem;
}

.blog__reaction i {
  font-size: 1.25rem;
}

.blog__reaction span {
  font-size: var(--small-font-size);
}








/* For small devices */
@media screen and (max-width: 375px) {
 

  .container__blog {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .container {
    margin-left: 1rem;
    margin-right: 1rem;
  }

}



@media screen and (max-width: 445px) {
  .container {
    margin-left: 1rem;
    margin-right: 1rem;
  }
 
  
}


@media screen and (min-width: 576px) {

  .blog__content {
    grid-template-columns: 450px;
    justify-content: center;
  }

}










@media screen and (min-width: 1048px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  .container__blog {
    margin-left: auto;
    margin-right: auto;
  }
  

  .blog__container {
    padding-bottom: 5rem;
  }
  .blog__content {
    grid-template-columns: repeat(2, 450px);
    column-gap: 5rem;
    padding-top: 2rem;
  }

}

<section  id="blog">
    <div >
        <h2 >
            Important Articles and Statistics
        </h2>

        <div >
            <article >
                <div >
                    <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="image of sad women" >
                    <a href="https://www.cdc.gov/std/statistics/2021/default.htm" >
                        <i class='bx bx-right-arrow-alt'></i>
                    </a>
                </div>

                <div >
                    <h2 >
                        STD Surveillance Data
                    </h2>
                    <p >
                        Preliminary data showing increase of STD spread from 2017 to 2021.
                    </p>

                    <div >
                        <div >
                            <i class='bx bx-share'></i>
                            <span>Share</span>
                        </div>
                        <div >
                            <i class='bx bx-repost' ></i>
                            <span>Repost</span>
                        </div>
                    </div>
                </div>
            </article>

            <article >
                <div >
                    <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="photo of doctor telling patient bad news " >
                    <a href="https://www.cdc.gov/media/releases/2021/p0125-sexualy-transmitted-infection.html#:~:text=CDC Newsroom Releases-,CDC estimates 1 in 5 people in,have a sexually transmitted infection&text=New data published by the,sexually transmitted infection (STI)." >
                        <i class='bx bx-right-arrow-alt'></i>
                    </a>
                </div>

                <div >
                    <h2 >
                        CDC study showing prevalence for STD's
                    </h2>
                    <p >
                        The CDC estimates that 1 in 5 people in the U.S. have a sexually transmitted infection. New data provides the clearest picture to date of how costly and common STIs are in the U.S.
                    </p>

                    <div >
                        <div >
                            <i class='bx bx-share'></i>
                            <span>Share</span>
                        </div>
                        <div >
                            <i class='bx bx-repost' ></i>
                            <span>Repost</span>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
</section>

CodePudding user response：

You are seeing the white-space under the image, because it is rendered like an inline element (just like a letter).

To fix this simply change the image to an block element like shown below:

img {
  display: block;
}

CodePudding user response：

Please apply vertical-align CSS to the <img> tag and fix your problem. :)

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lemon&family=Open Sans:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #38afff;
  --first-color-alt: hsl(204, 94%, 52%);
  --title-color: hsl(233, 32%, 15%);
  --text-color: hsl(233, 4%, 35%);
  --body-color: #daeef6;

  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Open Sans', sans-serif;
  --second-font: 'Lemon', cursive;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

  
img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none

}

/* Responsive typography */
@media screen and (min-width: 1224px) {
  :root {
    --biggest-font-size: 3.5rem;
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
  overflow-x: hidden;
  position: relative;
}



img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.main {
  overflow: hidden; /* For the animations */
}

.section__blog {
  padding: 4.5rem 0 2rem;
}

.container__blog {
  max-width: 1024px;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.grid__blog {
  display: grid;
  gap: 1.5rem;
}



/*=============== BLOG ===============*/
.blog__container {
  padding-bottom: 2rem;
}

.blog__content {
  row-gap: 3rem;
}

.blog__image {
  position: relative;
  margin-bottom: 1.5rem;
}

.blog__img {
  border-radius: .5rem;
  box-shadow: 0 4px 16px hsl(355deg 25% 15% / 10%);
}

.blog__button {
  display: inline-flex;
  background-color: #fff;
  padding: 1.15rem;
  border-radius: .5rem 0 .5rem 0;
  font-size: 2rem;
  color: var(--title-color);
  position: absolute;
  right: 0;
  bottom: 0;
  
}

.blog__button i {
  transform: rotate(-30deg);
  transition: .4s;
}

.blog__button:hover i {
  transform: rotate(-30deg) translateX(.25rem);
}

.blog__title {
  font-size: var(--h2-font-size);
  margin-bottom: .75rem;
}

.blog__description {
  margin-bottom: 1.5rem;
}

.blog__footer, 
.blog__reaction {
  display: flex;
  align-items: center;
}

.blog__footer {
  column-gap: 1.5rem;
}

.blog__reaction {
  column-gap: .25rem;
}

.blog__reaction i {
  font-size: 1.25rem;
}

.blog__reaction span {
  font-size: var(--small-font-size);
}








/* For small devices */
@media screen and (max-width: 375px) {
 

  .container__blog {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .container {
    margin-left: 1rem;
    margin-right: 1rem;
  }

}



@media screen and (max-width: 445px) {
  .container {
    margin-left: 1rem;
    margin-right: 1rem;
  }
 
  
}


@media screen and (min-width: 576px) {

  .blog__content {
    grid-template-columns: 450px;
    justify-content: center;
  }

}










@media screen and (min-width: 1048px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  .container__blog {
    margin-left: auto;
    margin-right: auto;
  }
  

  .blog__container {
    padding-bottom: 5rem;
  }
  .blog__content {
    grid-template-columns: repeat(2, 450px);
    column-gap: 5rem;
    padding-top: 2rem;
  }

}

<section  id="blog">
    <div >
        <h2 >
            Important Articles and Statistics
        </h2>

        <div >
            <article >
                <div >
                    <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="image of sad women" >
                    <a href="https://www.cdc.gov/std/statistics/2021/default.htm" >
                        <i class='bx bx-right-arrow-alt'></i>
                    </a>
                </div>

                <div >
                    <h2 >
                        STD Surveillance Data
                    </h2>
                    <p >
                        Preliminary data showing increase of STD spread from 2017 to 2021.
                    </p>

                    <div >
                        <div >
                            <i class='bx bx-share'></i>
                            <span>Share</span>
                        </div>
                        <div >
                            <i class='bx bx-repost' ></i>
                            <span>Repost</span>
                        </div>
                    </div>
                </div>
            </article>

            <article >
                <div >
                    <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="photo of doctor telling patient bad news " >
                    <a href="https://www.cdc.gov/media/releases/2021/p0125-sexualy-transmitted-infection.html#:~:text=CDC Newsroom Releases-,CDC estimates 1 in 5 people in,have a sexually transmitted infection&text=New data published by the,sexually transmitted infection (STI)." >
                        <i class='bx bx-right-arrow-alt'></i>
                    </a>
                </div>

                <div >
                    <h2 >
                        CDC study showing prevalence for STD's
                    </h2>
                    <p >
                        The CDC estimates that 1 in 5 people in the U.S. have a sexually transmitted infection. New data provides the clearest picture to date of how costly and common STIs are in the U.S.
                    </p>

                    <div >
                        <div >
                            <i class='bx bx-share'></i>
                            <span>Share</span>
                        </div>
                        <div >
                            <i class='bx bx-repost' ></i>
                            <span>Repost</span>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
</section>

CodePudding user response：

.blog__button {
  display: inline-flex;
  background-color: #fff;
  padding: 1.15rem;
  border-radius: .5rem 0 .5rem 0;
  font-size: 2rem;
  color: var(--title-color);
  position: absolute;
  right: 0.1px;
  bottom: 4.1px;
  
}