Question

当尝试减少两个p标签之间的空间时，我在html文件中执行了以下操作：

<div id="p1"> paragraph1 </p> </div>
<div id="p2"> paragraph2 </p> </div>

并在css文件中执行以下操作：

#p1{
   margin:0;
  }

#p2{
   margin:0;
  }

它不起作用。但是，如果我将html文件中的内容更改为：

<p id="p1">   paragraph1 </p> 
<p id="p2">   paragraph2 </p>

然后它的工作原理。换句话说，不使用div工程。为什么不能保证金：0;当p标签在div标签内时工作？

编辑：我在问题中写了一些错字。对不起，我很抱歉。当我试图减少p标签之间的空间时，我在css文件中正确使用了＃p1和＃p2。其次我没有嵌套p标签。我在问题中纠正了这些错别字。

EDIT2：这是html文件中的原始代码。

<html>
<head>
    <title> title </title>
    <link rel="stylesheet" type="text/css" href="pcss.css">
</head>


    <body>

        <div id="container">

            <div  id="p1">
            <p> Paragraph1 </p>
             </div> 



             <div  id="p2">
            <p> paragraph2</p>
             </div>


        </div>


    </body>

和css文件中的原始代码。

body{
background-color:black;}

#container{
background-color:grey;
width:600px;
height:600px;
margin:auto;}

#blank{
background-color:white;}

#p1{
color:white; 
width:600px;
text-align:center;
background-color:#666699; 
font-size:0.8cm; 
margin:0;}

#p2{
color:white; 
width:600px;
text-align:center;
background-color:#666699; 
font-size:0.8cm; 
margin:0;}

Answer 1

在css中id定义了#标记，而{c}部分缺少.和#

#p1{
   margin:0;
  }

#p2{
   margin:0;
  }

Answer 2

请注意： 这个原始答案是参考该问题的早期版本，其中OP在编写问题时将各种语法错误后来纠正为拼写错误。

总结其他帖子中提出的优点以及对此问题的评论：

1）您没有在CSS中处理Id标记。请注意页面上元素，类和ID的不同类型的CSS引用：

p1{
   /* This effects (ALL) elements on a page such as <p1></p1> */  
   margin:0;
  }
.p1{
   /* This effects classes only such as <p class='p1'></p> */
   margin:0;
  }
#p1{
   /* This effects id tagged elements such as <p id='p1'></p> */
   margin:0;
  }

2）

<p id="p2">  <p> paragraph2 </p>

您正在嵌套/堆叠<p>个元素。停下来。段落元素不应嵌套。打开另一个之前关闭一个。正确的结构<p>位于<div>内，id标记可以放在页面的任何位置（但只显示一次）。

3）解决原始问题的方法是在div容器中设置<p>标记中的ID，而不是：

CSS：

#p1 {
    margin:0; 
}

HTML：

  <div> <p id="p1"> paragraph1 </p> </div>

请注意，这是not the only solution method。

Answer 3

如果要格式化p标签，请使用

p {
   margin:0;
}

当<p>包含在</p> <div>中时，为什么p {margin：0}无效？

3 个答案: