我的 <p> 标签在使用 *{margin:0; 时不起作用； padding:0;}

Question

我有一首歌的歌词是这样写的：

<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>

问题是我将此代码应用于整个页面的 CSS：

 *{
     margin:0;
     padding:0;
 }

因为我需要在页面中放置其他东西（我需要 div 没有默认值 margins/paddings）

问题是，对于最后一个代码，我的“p”不起作用。他们不会在段落之间留下 space 行。为了让它工作，我可以在每个“/p”之后写“br”，但我认为不够整洁。我怎样才能让我的 p 也让最后的代码在那里工作？或者哪个是最好的方法？

Answer 1

如果要保留全局选择器以应用边距和填充，可以通过编辑选择器避免将其应用于 p 标签：

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

如果您想在以后修改其他元素的边距和填充，这也是一种不好的做法。您应该为要使用的站点的每个部分创建单独的选择器。考虑为您的歌词编写单独的样式：

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

然后将歌词包装到 HTML 文档中：

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

Answer 2

您可以re-add将您想要的样式放回到 p 标签上。

这将覆盖 * 样式，因为 specificity。

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

Answer 3

也许试试：

*: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

在这种情况下，您应该使用 pre 标签。

<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>

记住 pre 标签的 font-family 默认是等宽字体，但您可以使用 inherit

用最接近的父字体覆盖它

font-family: inherit;

Answer 6

你可以试试:

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

我的 <p> 标签在使用 *{margin:0; 时不起作用； padding:0;}

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

html

css

paragraph