Button is not inline with the image

Question

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 http://jsfiddle.net/0jftos7z/12/

 /*=============== 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 class="blog section__blog" id="blog"> <div class="blog__container container__blog"> <h2 class="section__title"> Important Articles and Statistics </h2> <div class="blog__content grid__blog"> <article class="blog__card"> <div class="blog__image"> <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="image of sad women" class="blog__img"> <a href="https://www.cdc.gov/std/statistics/2021/default.htm" class="blog__button"> <i class='bx bx-right-arrow-alt'></i> </a> </div> <div class="blog__data"> <h2 class="blog__title"> STD Surveillance Data </h2> <p class="blog__description"> Preliminary data showing increase of STD spread from 2017 to 2021. </p> <div class="blog__footer"> <div class="blog__reaction"> <i class='bx bx-share'></i> <span>Share</span> </div> <div class="blog__reaction"> <i class='bx bx-repost' ></i> <span>Repost</span> </div> </div> </div> </article> <article class="blog__card"> <div class="blog__image"> <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 " class="blog__img"> <a href="https://www.cdc.gov/media/releases/2021/p0125-sexualy-transmitted-infection.html#:~:text=CDC%20Newsroom%20Releases-,CDC%20estimates%201%20in%205%20people%20in,have%20a%20sexually%20transmitted%20infection&text=New%20data%20published%20by%20the,sexually%20transmitted%20infection%20(STI)." class="blog__button"> <i class='bx bx-right-arrow-alt'></i> </a> </div> <div class="blog__data"> <h2 class="blog__title"> CDC study showing prevalence for STD's </h2> <p class="blog__description"> The CDC estimates that 1 in 5 people in the US have a sexually transmitted infection. New data provides the clearest picture to date of how costly and common STIs are in the US </p> <div class="blog__footer"> <div class="blog__reaction"> <i class='bx bx-share'></i> <span>Share</span> </div> <div class="blog__reaction"> <i class='bx bx-repost' ></i> <span>Repost</span> </div> </div> </div> </article> </div> </div> </section>

Answer 1

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

Answer 2

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 class="blog section__blog" id="blog"> <div class="blog__container container__blog"> <h2 class="section__title"> Important Articles and Statistics </h2> <div class="blog__content grid__blog"> <article class="blog__card"> <div class="blog__image"> <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="image of sad women" class="blog__img"> <a href="https://www.cdc.gov/std/statistics/2021/default.htm" class="blog__button"> <i class='bx bx-right-arrow-alt'></i> </a> </div> <div class="blog__data"> <h2 class="blog__title"> STD Surveillance Data </h2> <p class="blog__description"> Preliminary data showing increase of STD spread from 2017 to 2021. </p> <div class="blog__footer"> <div class="blog__reaction"> <i class='bx bx-share'></i> <span>Share</span> </div> <div class="blog__reaction"> <i class='bx bx-repost' ></i> <span>Repost</span> </div> </div> </div> </article> <article class="blog__card"> <div class="blog__image"> <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 " class="blog__img"> <a href="https://www.cdc.gov/media/releases/2021/p0125-sexualy-transmitted-infection.html#:~:text=CDC%20Newsroom%20Releases-,CDC%20estimates%201%20in%205%20people%20in,have%20a%20sexually%20transmitted%20infection&text=New%20data%20published%20by%20the,sexually%20transmitted%20infection%20(STI)." class="blog__button"> <i class='bx bx-right-arrow-alt'></i> </a> </div> <div class="blog__data"> <h2 class="blog__title"> CDC study showing prevalence for STD's </h2> <p class="blog__description"> The CDC estimates that 1 in 5 people in the US have a sexually transmitted infection. New data provides the clearest picture to date of how costly and common STIs are in the US </p> <div class="blog__footer"> <div class="blog__reaction"> <i class='bx bx-share'></i> <span>Share</span> </div> <div class="blog__reaction"> <i class='bx bx-repost' ></i> <span>Repost</span> </div> </div> </div> </article> </div> </div> </section>

Answer 3

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