When trying to reduce the space between two p tags, I did the following in the html file:

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

```

and did the following in the css file:

```
#p1{
   margin:0;
  }

#p2{
   margin:0;
  }

```

it doesn't work. But if I change the content in the html file into:

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

```

then it works. In other words, not using div works. Why can't the margin:0; work when the p tags are inside the div tags?

EDIT: I made some typos in the questions. I'm sorry for that. When I was trying to reduce the space between the p tags, I correctly used #p1 and #p2 in the css file. Secondly I didn't nest the p tags. I have corrected those typos in the questions. 

EDIT2: This is the original code in the html file.

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

```

and the orignal code in the css file.

```
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;}

```