How to make my two text elements "stick" more together

Question

I'm trying to recreate this part of a website using HTML&CSS : and my part looks like this : The size difference of the elements doesn't matter here but what triggers me is that in the first image, you can see the heading and the paragraph are "sticking" together. In my version, there is a space between them, and I can't figure out how to remove it.

Here are the concerned code lines :

.cta {
  background: #3882f6;
  padding: 50px 100px;
  border-radius: 10px;
  border-style: none;
  color: #f9faf8;
}

.cta-container {
  padding: 100px 0;
}

.cta-signup-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.cta-signup {
  background: #3882f6;
  border-radius: 8px;
  border-style: none;
  color: #f9faf8;
  width: 120px;
  height: 33px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #f9faf8;
}

<div class="cta-container">
  <div class="cta">
    <div class="cta-wrapper">
      <h3>Call to action! It's time!</h3>
      <div class="cta-signup-wrapper">
        <p>Sign up for our product by clicking that button right over there!</p> <button type="button" class="cta-signup">Sign up</button> </div>
    </div>
  </div>
</div>

I tried playing around with the paragraph, removing it, or nesting the cta-signup-wrapper differently but without success.

Huge top and button margin on the h3 – mplungjan Nov 18 '22 at 22:04 — mplungjan, Nov 18 '22 at 22:04

score 0 · Accepted Answer · answered Nov 18 '22 at 22:08

Here you can try this logic :

.cta {
      background: #3882f6;
      padding: 50px 100px;
      border-radius: 10px;
      border-style: none;
      color: #f9faf8;
    }

    .cta-container {
      padding: 100px 0;
    }

    .cta-wrapper {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .cta-signup-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: start;
    }

    .cta-signup-wrapper > * {
      margin-top: -1em;
    }

  

.cta-signup {
  background: #3882f6;
  border-radius: 8px;
  border-style: none;
  color: #f9faf8;
  width: 120px;
  height: 33px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #f9faf8;
  margin-top: -1em;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="cta-container">
      <div class="cta">
        <div class="cta-wrapper">
          <div class="cta-signup-wrapper">
            <h3>Call to action! It's time!</h3>
            <p>
              Sign up for our product by clicking that button right over there!
            </p>
          </div>
          <button type="button" class="cta-signup">Sign up</button>
        </div>
      </div>
    </div>
  </body>
</html>

I only added the line : .cta-signup-wrapper > * { margin-top: -1em; } and it worked! Why did you add a margin-top: -1em; to the button as well ? Thanks. — Hilow, Nov 18 '22 at 22:16
equal minus from both element , if you don't need then you can ignore margin-top: -1em; to the button — Jerry, Nov 18 '22 at 22:19

score -1 · Answer 2 · answered Nov 18 '22 at 22:04

h3 and p elements have a lot of margin by default (h3 margin highlighted in orange below):

Fix that by removing your h3's margin-bottom and p's margin-top:

.cta {
  background: #3882f6;
  padding: 50px 100px;
  border-radius: 10px;
  border-style: none;
  color: #f9faf8;
}

.cta-container {
  padding: 100px 0;
}

.cta-signup-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.cta-signup {
  background: #3882f6;
  border-radius: 8px;
  border-style: none;
  color: #f9faf8;
  width: 120px;
  height: 33px;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #f9faf8;
}

h3 {
  margin-bottom: 0;
}

p {
  margin-top: 0;
}

<div class="cta-container">
  <div class="cta">
    <div class="cta-wrapper">
      <h3>Call to action! It's time!</h3>
      <div class="cta-signup-wrapper">
        <p>Sign up for our product by clicking that button right over there!</p>
        <button type="button" class="cta-signup">Sign up</button>
      </div>
    </div>
  </div>
</div>

Huge dupe already answered in the comment. Please do not answer such simple questions - they can be commented and deleted — mplungjan, Nov 18 '22 at 22:06
Strangely your solution didn't work.. but adding this made it work : .cta-signup-wrapper > * { margin-top: -1em; } . I already have an universal selector on my css removing margin, padding and setting it to border-box. Maybe that's why? — Hilow, Nov 18 '22 at 22:19

How to make my two text elements "stick" more together

2 Answers2