my <p> tags don't work when using *{margin:0; padding:0;}

Question

I have this lyrics of a song that i wrote like this:

<p>School bell rings, walk me home<br>
Sidewalk chalk covered in snow<br>
Lost my gloves, you give me one<br>
"Wanna hang out?"<br>
Yeah, sounds like fun<br>
Video games, you pass me a note<br>
Sleeping in tents</p>
    
<p>It's nice to have a friend<br>
(Ooh)<br>
It's nice to have a friend<br>
(Ooh)</p>
    
<p>Light pink sky up on the roof<br>
Sun sinks down, no curfew<br>
Twenty questions, we tell the truth<br>
You've been stressed out lately? Yeah, me too<br>
Something gave you the nerve<br>
To touch my hand</p>

The thing is i applied this code to the CSS of the whole page:

 *{
     margin:0;
     padding:0;
 }

Cause there were other things i needed to position in the page (i needed the divs to not have the default margins/paddings)

The problem is, with this last code, my "p" don't work. They don't leave a space-line in between the paragraphs. To make it work i can write "br" after every "/p", but i don't think tidy enough. How can i make my p work by also letting that last code there? or which is the best way to do it?

Answer 1

If you want to preserve the global selector to apply margin and padding, you can avoid applying it to the p tag by editing the selector:

* :not(p) {
    margin: 0;
    padding: 0;
}

This is also just bad practice in case you want to modify margin and padding for other elements down the road. You should be creating individual selectors for each section of the site you want to work with. Consider writing a separate style for your lyrics:

.lyrics p {
    margin: 1em 0 1em 0;    // top right bottom left
}

and then wrapping your lyrics your HTML document:

<div class="lyrics">
    <p>
        line1<br>
        line2<br>
        line3<br>
        line4<br>
    </p>
</div>

Answer 2

You can re-add the styles you want back onto the p tags.

This will override the * styles due to a higher specificity.

p {
   margin-top: 1em;
   margin-bottom: 1em;
}

Answer 3

Maybe try:

*:not(p) {
   padding: 0;
   margin: 0;
} 

Answer 4

div.my-lyrics {
  margin: 0;
  padding: 0;
}

<div class="my-lyrics">
  <p>School bell rings, walk me home<br> Sidewalk chalk covered in snow<br> Lost my gloves, you give me one<br> "Wanna hang out?"<br> Yeah, sounds like fun<br> Video games, you pass me a note<br> Sleeping in tents</p>

  <p>It's nice to have a friend<br> (Ooh)
    <br> It's nice to have a friend<br> (Ooh)
  </p>

  <p>Light pink sky up on the roof<br> Sun sinks down, no curfew<br> Twenty questions, we tell the truth<br> You've been stressed out lately? Yeah, me too<br> Something gave you the nerve<br> To touch my hand</p>
</div>

Answer 5

You should use pre tag in this case.

<pre>
  School bell rings, walk me home
  Sidewalk chalk covered in snow
  Lost my gloves, you give me one
  "Wanna hang out?"
  Yeah, sounds like fun
  Video games, you pass me a note
  Sleeping in tents
</pre>

keep in mind that pre tag's font-family is monospaced font by default, but you can override it with closest parent's font with inherit

font-family: inherit;

Answer 6

You can try :

* :not(p) {
    margin: 0;
    padding: 0;
}