html div与p,为什么里面带有p标签的html div标签与其中包含img标签的标签不同？

我在Codecademy.com上工作时编写了以下代码。基本上我有一堆用

标签创建的圆形容器。空的时候，所有容器都只是整齐排列。当我在一些

内添加图像时，它并没有影响间距。但是，当我在其中一个

容器内的

标签内添加文字时，它将整个容器撞到了半英寸。 (注意：删除或添加更多
代码无效，也没有将边距设置为0.)

我的问题是：为什么会发生这种情况，如何阻止它发生？

由于我这样做是为了学习，所以我更关心理解为什么会发生这种情况，而不仅仅是快速解决问题。谢谢。

以下是代码：

＆＃13;

＆＃13;

div {

display: inline-block;

margin-left: 5px;

border-radius: 100%;

height: 100px;

width: 100px;

border: 2px solid black;

}

.friend {

border: 2px dashed #008000;

}

.family {

border: 2px dashed #0000ff;

}

.enemy {

border: 2px dashed #ff0000;

}

#best_friend {

border: 4px solid #00c957;

}

#archnemesis {

border: 4px solid #cc0000;

}

img {

border-radius: 100%;

height: 100px;

width: 100px;

}

div p {

text-align: center;

border: 0;

padding: 0;

}＆＃13;

My Social Network

Forest elf guy number 7

＆＃13;＆＃13;＆＃13;