Nadj Nadj - 21 days ago 7
CSS Question

how to solve overflowing content

I just added a link tag after an input text type but when I view the site, the link goes on top of the input as you can see on the photo and don't see anything wrong.
Perhaps there is a reset css that I dont know.

HTML:

<div class="cont bonus">
<h3>You have no active Bonus on your account</h3>
<h4>Got a Bonus code?</h4>
<input class="input" type="text" name="bonuscode" placeholder="Bonus Code"><br>
<div id="activate">
<a class="activate" href="#">Activate</a>
</div>
</div>


Here my css:

a.activate{
background-color: pink;
padding: 10px;
}


Hope you can help.
https://jsfiddle.net/Wosley_Alarico/p11xvnpf/2/

Answer

That's because your link is an inline element. The padding you've added behaves differently for inline elements than block elements.

Set your link to display: inline-block;

a.activate {
  background-color: pink;
  padding: 10px;
  display: inline-block;
}
<div class="cont bonus">
  <h3>You have no active Bonus on your account</h3>
  <h4>Got a Bonus code?</h4>
  <input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
  <br>
  <div id="activate">
    <a class="activate" href="#">Activate</a> 
  </div>
</div>

An inline element occupies only the space bounded by the tags that define the inline element.

- MDN Inline Elements.