Question

我有这个div的类“circle-text”，其中包含一个包含小文本的“p”元素。

p元素具有顶部和底部边距。现在这个边距似乎被移动到高于div而不是在div和p之间，这是我不想要的。

CSS：

.circle-text {
    /*float: right;*/ /* Uncomment it*/
    width:20%;
    border-radius: 50%;
    background-color: green;
}
.circle-text p {
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin:2em 0;
    text-align:center;
}

以下是示例：http://jsfiddle.net/bendtherules/3eebw/6/

现在，如果我将float: right;添加到上部div，它实际上包含了边距（这正是我想要的）。这是如何运作的？另外，我该如何缓解这个问题呢？

Answer 1

如果我理解你的问题，发生这种情况的原因是你添加了填充和边距。保证金超出了填充范围。如果您在Chrome中按Ctrl + Shift + C，请将鼠标悬停在p上并选中它，以便您可以检查元素。您会注意到p的边距位于已经存在的填充之外。

打开开发人员工具后，转到右侧面板并向下滚动，直到您可以看到可以看到有多少像素或边距和填充的部分。这是一张你不能错过的互动图片。

Answer 2

DEMO：http://jsbin.com/uBANucu/1/

另一种可能更灵活的选择：http://codeitdown.com/css-circles/

p将始终影响高度，因此结果是椭圆形，而不是圆形。有很多方法可以做到这一点，其中之一是：

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

CSS

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

Answer 3

如果设置line-height: 0适合您的设计，请更改并完全删除边距。

示例：http://jsfiddle.net/3eebw/12/

了解CSS框模型可能对您有所帮助。请参见此图表：http://www.w3.org/TR/CSS21/box.html

Answer 4

从我能看到你的意思是你想要从p标签增加圆的顶部和底部边缘之间的空间。填充是正确的方法，而不是边缘。

外部div（未浮动时）丢弃内部<p>边距</p>

4 个答案:

DEMO：http://jsbin.com/uBANucu/1/