Question

I’ve been asked to make a button for a friend, however I was unable to make the text stay in the right postition.

Here is my HTML code

<div id="sign-in-button">
    <p>Sign-in</p>
</div>

Here is my CSS code

#sign-in-button{
    height: 20px;
    width: 60px;
    background-color: orange;
    background-image: url(external_links_icon.png);
    background-position: right;
    background-repeat: no-repeat;
    border:1px solid gray;
    border-radius: 5px;
    position: absolute;
}

You may have noticed that the word Sign-In is not within the orange block. Any of you know the solution?

Answer 1

it’s caused of the p tag, try to use a span tag instead.

<div id="sign-in-button">
  <span>Sign-in</span>
</div>