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

Issue

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?

Solution

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>

Answered By – zayadur

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.