Question

朋友们，这是我面临的一个非常简单的问题。我有一个名为'testDiv'的容器，并在容器内部有一个要测试的段落。问题是当我指向段落（.testDiv p）并指定margin-top：75px;时，它也会影响到容器。所以，这就是我想要的。我想只移动段而不是容器。如果没有对段落使用绝对位置，是否存在任何可能性。

这是我到目前为止所尝试的内容 - http://jsbin.com/adudih/1/edit

Answer 1

使用padding-top代替margin-top。所以它应该是

.testDiv p {
  display: block;
  padding-top: 75px;
  color: white;
}

<强>更新它影响容器的原因是因为您已经指定了样式.testDiv p。它将首先引用.testDiv，然后仅引用p。另一种方法是通过为其指定类名并设置边距来设置段落样式。

<div class='testDiv'>
    <p class="p-style">Some text to play around.</p>
</div>

.p-style{
    margin-top: 75px;
}

Answer 2

您有多种方法可以完成此任务：

使用padding-top而非margin-top： http://jsbin.com/etazem/2/edit
在段落标记上使用line-height并将其设置为相同高度作为容器:(使用此方法，您将遇到文本换行<的问题/ strong>如果文本溢出容器宽度）： http://jsbin.com/etazem/1/edit

填充与保证金： http://www.impressivewebs.com/difference-between-margins-padding-css/

Answer 3

点击此处，DEMO http://jsfiddle.net/yeyene/Ted2F/1/

对于p css，请使用float & margin-top代替line-height

围绕p margin-top玩游戏，然后看看。

.testDiv {
    width: 200px;
    height: 300px;
    background-color: blue;
    text-align: center;
    position: relative;
}
.testDiv p {
    float:left;
    background:green;
    margin-top: 130px;
    color: white;
}

垂直居中对齐容器中的段落。

3 个答案: