Css 外部div（未浮动时）丢弃内部<；p>；边缘

我有一个类为“circle text”的div，它包含一个包含小文本的“p”元素

p元素有上下边距。 现在这个边距似乎移到了上div的上方，而不是在div和p之间，这是我不想要的

CSS:

下面是一个例子：

现在，如果我添加

float:right到上面的div，它实际上现在包括了边距（这正是我想要的）。
这是怎么回事？另外，如何缓解此问题？
如果设置
行高：0
适合您的设计，请更改此设置并完全删除边距

例如：

了解CSS框模型可能会对您有所帮助。请参见此图：
如果我正确理解您的问题，那么发生这种情况的原因是您添加了填充和边距。边距超出了填充的范围。如果在Chrome中按Ctrl+Shift+C，请将鼠标悬停在
p
上并选择它，以便可以检查元素。您会注意到
p
的边距在已经存在的填充之外

打开开发工具后，转到右侧面板并向下滚动，直到到达可以看到有多少像素或边距和填充的部分。这是一张您绝对不会错过的互动图片。
演示：
另一个可能更灵活的选择：

p总是会影响高度，因此结果是一个椭圆形，而不是真正的圆形。有很多方法可以做到这一点，这里有一个：

<div class="circle-container">
   <div class="circle-text">
    <p>I am circle</p>
   </div>
</div>    

从这里我可以看到，你的意思是，你想增加的空间之间的顶部和底部边缘的圆圈从p标签。填充是正确的方式，而不是边距。
是的，我见过。我不明白为什么会这样。你能解释一下吗？内部元素的边距应该在内部元素和外部元素之间，对吗？发生这种情况的原因是因为填充与元素内内容的上下空间有关，而边距与元素外的空间有关。所以边距在填充的外面。这有帮助吗？这里有几个很好的链接：，^是的，我得到了内部元素填充在外部的部分。但是它应该在外部元件之外还是在外部元件内部呢？是的，这对我的设计很好。线的高度实际上发生了什么变化？（我是css新手。）基本上，文本行之间的间距。看看你是否想要一个实际的圆，这是一个选项。如果你只是想要一个椭圆形的东西，你可以去掉边距，线条高度，然后在p上加上填充物。谢谢，我其实是想要这个。事实上，我一开始看到了这个链接，但想在没有：after的情况下完成它。为什么它不那么灵活，因为它只能接受一行？这只能接受一行。
<div class="circle-container">
   <div class="circle-text">
    <p>I am circle</p>
   </div>
</div>    

.circle-container {width:20%;}

.circle-text {
   border-radius: 50%;
   background-color: green;
   padding-top:50%;
   padding-bottom:50%;
   position:relative;
}

.circle-text p {
  position:absolute;
  top:50%;
  width:100%;
  line-height:0;
  margin:0;
  padding:0;
  text-align:center;
  color:#fff;
  font-size:15px;
}