ブロックラベルのマージンボトム

無線ラベルに余白を追加しようとしています。表示スタイルを変更してボトムマージンを追加しましたが、スペーシングにはまったく影響しないように見えますし、後続のエレメントと重なっているようです。例えばブロックラベルのマージンボトム

：

.slider-label { 
    position: absolute; 
    display: block; 
    cursor: pointer; 
    color: #5e5e5e; 
    text-align: center; 
    margin-bottom: 50px; 
}

出典

2017-01-28 Daniel

私はそれに取り組んでいますが、 'input'要素は終了タグを得ることはありません。 –

それらを削除しました:) – Daniel

'position：absolute;'はDOMのフローから要素を削除します。したがって、余白や余白はページの他の要素に影響しません。また、 '.radios-to-slider.medium'には' height：22px'があります。そのため、後で子供たちが22pxよりも大きい場合、ページの後ろにある要素がそれに突き当たります。 –

問題は、文書の通常の流れからそれをとる、.radios-to-sliderクラスはposition:relativeを使用するように設定されていることです。そのクラスに下限を追加する代わりに、divinputクラスに上マージンを追加するだけです。

div.divinput { 
    margin-top:50px; 
    margin-bottom: 15px; 
    display: block; 
}

このフィドルを参照してください：https://jsfiddle.net/uuzw5cwe/1/

出典

2017-01-28 20:08:13

これは正常に機能します（後続の入力要素に余白を追加できます）が、余分な余白を追加しない限り、順次無線との間隔の問題は発生しますが、必要な問題に戻ります十分なマージンを取る代わりに、私の最長のラベルを補うのに十分なマージンを追加してください。 DOMの流れから取り除かないラベルの位置を再調整する（学習する）ために私に指摘できるリソースはありますか？ – Daniel

なぜそれらの行の間に空の 'div'を挿入してそれらのdivにマージンを適用できないのですか？ –

ブロックラベルのマージンボトム

答えて

関連する問題