0

友よ、これは私が直面している非常に単純な問題です。「testDiv」というコンテナーがあり、コンテナー内にテストする 1 つの段落があります。問題は、段落 ( .testDiv p ) をターゲットにして margin-top: 75px; を割り当てると、コンテナーにも影響します。だから、ここに私が欲しいものがあります。コンテナーではなく段落のみを下に移動したい。段落への絶対位置を使用せずに可能性はありますか。

これが私がこれまでに試したことです - http://jsbin.com/adudih/1/edit

4

3 に答える 3

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;
}
于 2013-06-27T03:22:17.760 に答える
1

これを達成するには、複数の方法があります。

  1. 使用する場合と使用padding-topしない場合margin-top: http://jsbin.com/etazem/2/edit

  2. line-height段落タグで使用し、コンテナと同じ高さに設定します: (この方法では、テキストがコンテナの幅からはみ出す場合、テキスト の折り返しで問題が発生します): http://jsbin.com/etazem/1/edit

パディングとマージン: http://www.impressivewebs.com/difference-between-margins-padding-css/

于 2013-06-27T03:23:24.547 に答える
0

ここをチェック、DEMO http://jsfiddle.net/yeyene/Ted2F/1/

pCSS の場合は、代わりに使用し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;
}
于 2013-06-27T03:47:19.423 に答える