How to seperate <p> and <a> HTML tags

user_17831707 0
Viewed 68

Here is my footer:

<footer style="background-color:#1b1c1f;" class="center">
            <p class="center" style="color:rgb(255, 255, 255); font-family:arial; font: size 24px;">© 2022 Moonlight™ All rights reserved.</p>
            <a href="https://moonlighthq.net/terms.html">
                <p style="text-decoration: none; color:rgb(255, 255, 255); font-family:arial; font: size 24px;">Terms</p>
            </a>
            <a href="https://moonlighthq.net/privacy.html">
                <p style="text-decoration: none; color:rgb(255, 255, 255); font-family:arial; font: size 24px;">Privacy Policy</p>
            </a>
        </footer>

My problem is, is that it shows like this: "© 2022 Moonlight™ All rights reserved.TermsPrivacy Policy" on our website. How can I add a " " between the <p> and <a>. And I did try putting a space in the <p>

css html
4 Answers

Any time you use <p> your elements will have a break and create a second line. What I would do is use <div> to wrap your links. However, you can still use <p> and create the layout you are trying to achieve. You will want to put this code into your stylesheet (.css) in the <head>

Try this:

footer.center a,footer.center p 
{ 
display: inline-block; 
vertical-align:top; 
margin: 0 5px;
}
user_108585440

&#160; is also and alternative to &nbsp;

user_178450930

The p tag is a block elememt. You are wrapped the block element with a anchor element. if you would like to have:

  1. © 2022 Moonlight™ All rights reserved.

  2. Terms

  3. Privacy Policy

You can replace the first p tag with a span and

<footer style="background-color:#1b1c1f; padding: 5px;" class="center">
            <span class="center" style="color:rgb(255, 255, 255); font-family:arial; font: size 24px; margin: 5px;">© 2022 Moonlight™ All rights reserved.</span>
  
            <a style=" margin: 5px;text-decoration: none; color:rgb(255, 255, 255); font-family:arial; font: size 24px;" href="https://moonlighthq.net/terms.html">
                Terms
            </a>
            <a style="text-decoration: none; color:rgb(255, 255, 255); font-family:arial; font: size 24px;" href="https://moonlighthq.net/privacy.html">
                Privacy Policy
            </a>
 </footer>

user_148071110

You can use &nbsp; code to add " " to somewhere.

user_177328270
Related