Text Spacing Issue

by

I currently am trying to fix the text on my button for my site. Currently I am trying to get the icon and the text to align but I am stuck on being able to remove the default padding below my text, which can be seen in my screen shot attached. I was wondering what I am missing when trying to fix this since I have tried line height as well and still can remove it

.hero-container {
  position: relative;
  height: 100vh;
  background-image: url("../../assets/images/heroheader.webp"); /* Your background image */
  background-size: cover;
  background-position: center;
}

/* .overlay {
  background: rgba(0, 0, 0, 0.5); 
} */

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white; /* Adjust the text color as needed */
}

/* Additional styling for text and button */
.hero-text h1 {
  font-size: 6rem;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.hero-text h1,
.hero-text p {
  font-family: "Rubik", sans-serif; /* Example font */
  text-shadow: none;
}

button {
  padding: 0px 40px;
  border: none;
  border-radius: 8px;
  background-color: var(--accent-color);
  font-size: 100%;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center; /* This ensures vertical centering of children */
  height: 60px;
  line-height: 56px; /* Adjust this as needed, slightly less than the button height */
}

.button-icon {
  height: 100%; /* Fill the height of the button */
  width: auto; /* Maintain aspect ratio */
  margin-left: 15px;
}

Font Has Extra Padding on bottom by default?

  • 1

    It’s unclear what exactly you are trying to achieve. How exactly do you want to fix the text? center it in its own box or remove the spacing from the top and bottom?

    – 

  • 1

    Please provide a proper minimal reproducible example of your issue, when asking this kind of question, instead of just snippets that lack context. (CSS without the HTML it is supposed to apply to, tells rather little.)

    – 

  • I am trying to remove the padding on the text. In the image when I highlight the text there is that extra space above and below the text. It does not seem like adjusting the padding will do it since it will do it to the whole button. The Icon image to the right of the text currently does not have any padding on it when I highlight it.

    – 

Leave a Comment