Inline Anchor PUSHED out of Parent Div

HTML-CSS
#1

image
For some strange reason, when I’ve got an inline image and inline anchor element, and the image has 100% height/40% width and anchor has 100% height/40% width, the ANCHOR GETS PUSHED OUT OF THE DIV…

I have no clue at all why this is happening, it makes zero sense…
Is this a bug…?

#2

We can’t see your code… so no way to tell.

1 Like
#3

Sorry…Here it is:
HTML

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>
      Otako Portfolio
    </title>

    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <header id="navbar">
      <header>
        <h1> Otako Work Showcase </h1>
      </header>

      <nav id="NavigationBar">
        <a class="NavigationBarLink" href="#welcome-section">
          WAHlcome!
        </a>

        <a class="NavigationBarLink" href="#projects">
          My Projects
        </a>

        <a class="NavigationBarLink" href="#Contact">
          Let's Talk
        </a>
      </nav>
    </header>

    <main>
      <section id="welcome-section">
        <h1 class="SectionHeader">
          WAH!
        </h1>

        <p class="SectionBottomElement">
          Welcome to my collection of projects!
        </p>
      </section>

      <hr>

      <section id="projects">
        <h1 class="NavigationBar">
          My Projects
        </h1>

        <p class="SectionBottomElement">
          Here are some of my hand-picked, top pieces of work I've decided to showcase.
        </p>
      </section>

      <hr>

      <section id="Contact">
        <h1 class="SectionHeader">
          Let's Talk
        </h1> 
        
        <p>
          Are you interested? You can always contact me with a DM on Twitter; I'd be happy to talk with you! I check my DMs twice every day, so please expect a fast response.
        </p>

        <div id="TwitterLink">
          <img id="TwitterIcon" src="https://toppng.com/uploads/preview/twitter-icon-transparent-11549680383mmzgiol88v.png" alt="Twitter Icon">

          <a id="profile-link" class="SectionBottomElement" href="renshuu.org" target="_blank">
            My Twitter
          </a>
        </div>
      </section>
    </main>
  </body>
</html>

CSS

/* ROOT */

:root {
  --NavigationBarHeight: 110px;
  --H1FontSize: clamp(28px, 9vh, 45px);
  --DefaultFontSize: clamp(14px, 2.25vh, 218px);
  --MainSectionGap: calc(3.77 * var(--DefaultFontSize));
  --MainVerticalPadding: calc(1.85 * var(--DefaultFontSize));
}

/* ALL ELEMENTS */

* {
  font-family: Verdana;
}

/* HTML */

html {
  scroll-padding-top: calc(var(--NavigationBarHeight) + var(--MainSectionGap) + var( --DefaultFontSize) + (var(--MainSectionGap) / 2));
  scroll-behavior: smooth;
}

/* BODY */

body {
  margin: 0;
  padding: 0;
  /* Hide Scrollbar */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Hide Scrollbar */
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* HEADER */

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  height: var(--NavigationBarHeight);
  background-color: rgb(0, 128, 255);
  overflow: scroll;

  /* Hide Scrollbar */
  -ms-overflow-style: none;  /* IE */
  scrollbar-width: none; /* Firefox */
}

/* Hide Scrollbar */
#navbar::-webkit-scrollbar {
  display: none; /* Opera, Chrome, Edge, and Safari */
}

#navbar header {
  margin: calc(0.8 * var(--DefaultFontSize)) auto calc(0.54 * var(--DefaultFontSize)) auto;
  width: 80%;
  text-align: center;
  display: block;
}

#navbar header h1 {
  font-size: var(--H1FontSize);
  color: rgb(246, 241, 241);
}

#NavigationBar {
  margin: calc(0.8 * var(--DefaultFontSize)) auto;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: calc(0.8 * var(--DefaultFontSize));
}

.NavigationBarLink {
  margin: 0;
  color: rgb(89, 243, 255);
  text-decoration: none;
}

/* MAIN */

main {
  margin: calc(var(--NavigationBarHeight) + var(--MainVerticalPadding)) var(--DefaultFontSize) var(--MainVerticalPadding) var(--DefaultFontSize);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  row-gap: var(--MainSectionGap);
}

h1 {
  margin: 0;
  font-size: calc(1.389 * var(--DefaultFontSize));
  text-align: center;
}

section {
  width: auto;
  max-width: 82.5%;
  margin: 0 auto;
}

a, p {
  line-height: calc(1.45 * var(--DefaultFontSize));
  font-size: var(--DefaultFontSize);
}

p {
  margin: var(--MainVerticalPadding) 0;
}

#TwitterLink {
  width: 50%;
  height: calc(3 * var(--DefaultFontSize));
  margin: var(--MainVerticalPadding) auto;
}

#TwitterIcon {
  width: 40%;
  height: 100%;
  object-fit: contain;
  display: inline;
}

#profile-link {
  width: 50%;
  height: 100%;
  color: rgb(255, 140, 45);
  text-decoration: none;
  display: inline;
}

hr {
  margin: 0 auto;
  width: 15%;
  height: calc(0.4 * var(--DefaultFontSize));
  border: 0;
  border-radius: 1em;
  background-color: rgb(255, 229, 181);
}

.SectionBottomElement {
  margin-bottom: 0;
}

@media (max-width: 479px), (max-height: 479px) {
  #nav-bar {
    position: static;
  }
}

@media (min-height: 769px) {
  :root {
    --NavigationBarHeight: 147.5px;
  }
}

Is this what you mean?

#4

Is this what you want to get?

image
image761×583 27.2 KB

1 Like
#5

Exactly! Though I’m more focused on how/why:

The image pushes the inline text downwards out of the div, even though the image is not touching the text.

#6

The strange gap in HTML - DEV Community :woman_technologist::man_technologist:

Found the answer! Annoying feature that doesn’t make sense.

1 Like