Why does this have a huge margin?

Coding Help
1 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

.input-name{
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#title{
  border: none;
  outline: none;
}

.underline-animation{
  transition: 1s linear;
  display: inline-block;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: rgba(255,69,0,0.5);
}

#title:hover + .underline-animation{
  height: 25px;
  transition: 1s;
}

/*
a > b means selects all b where a is the parent
b + c means all c placed immediately after b

*/
</style>
</head>
<body>


 <div class="input-name">
<p id="title">ABCDFEDF </p>
  <span class="underline-animation"></span>
</div>
</body>
</html>

I’m copying the animation on Hackernoon for links - there’s a span underlining the link and then it increases in heights and becomes a highlight. I was mostly able to do it by messing around with someone else’s code, but here’s this massive margin around it:

Screen Shot 2020-08-23 at 9.44.18 PM
Screen Shot 2020-08-23 at 9.44.18 PM1872×720 80.3 KB

I don’t have any styling setting the margin to 16. How do I get rid of it?

2

At the bottom of your screenshot, you can see where the margin is defined, in user agent stylesheet, i.e. what your browser has for defaults.

To get rid of it, add something like

p {
  margin: 0;
}

This assumes all your paragraphs need the margin removed. If its just one, you can use the id you have setup …

#title {
  margin: 0;
}
6 Likes
3

I didn’t bother to look at the auto styles lol. Thanks!

2 Likes