0

divに、マージントップを与えるのに問題がある要素があります。

div内の要素を移動する代わりに、div全体を移動するようにしか取得できません。

マージントップを付けたいのは紫色の円です。

http://jsfiddle.net/9J8R5/

#step1 {
    width:100px;
    height:100px;
    border-radius:50px;
    background-color:#5020B8;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:1em;
    font-size:60px;
    color:#ffffff;
    font-family:Cusmyrb;
    line-height:105px;
    text-align:center;
    padding:0;
}
4

2 に答える 2

0

CSSボックスモデルがどのように機能するかについては、W3Cを確認してください

問題を解決するには、次の2つのオプションがあります。

  1. 前述のようにマージンを使用しますが、円の前にコンテンツを追加します。例：jsFiddle
  2. の代わりに、で使用padding-topします。例：jsFiddle#completeinfomargin-top
于 2013-01-12T15:31:01.537 に答える
0

マージンが折りたたまれているため、マージントップが子要素に期待どおりに表示されません。

ブロックのマージントップを最初の子ブロックのマージントップと分離するための境界線、パディング、インラインコンテンツ、またはクリアランスがない場合、または境界線、パディング、インラインコンテンツ、高さ、最小高さ、または最大値がない場合-ブロックのマージンボトムを最後の子のマージンボトムで分離する高さ。その後、これらのマージンは折りたたまれます。折りたたまれたマージンは、親の外側になります。

ソース：https ：//developer.mozilla.org/en-US/docs/CSS/margin_collapsing

本当にmargin-topを子要素に存在させたい場合は、次のいずれかの追加でそれが可能になります。

#competeinfo {
    border: 1px solid transparent;
}

http://jsfiddle.net/9J8R5/5/

または

#competeinfo {
    overflow: hidden;
}

http://jsfiddle.net/9J8R5/6/

それ以外の場合は、親要素のパディングがおそらく最良の選択です。

于 2013-01-12T15:34:44.817 に答える