css - divの上の空白

Question

次の画像を見てください..

ご覧のとおり、各コメントを囲む:hoverプロパティを追加しました。divしかし、私は小さな空白を取得します。Chrome 開発ツールを使用して要素を強調表示すると、空白がすべての要素の領域から出てきます。2つのdivの間に空白が詰まっているようです。削除するのを手伝ってください。負の値として追加margin-topしましたが、ホバー時にけいれん効果が得られます。

Answer 1

ソースがなければ、HTML について推測することしかできないので、ご容赦ください。

内の要素から伸びる余白を確認し<div>ます。そこ<p>に がある場合、余白が親の境界を越えて広がっている可能性があり<div>ます。

その場合、これでうまくいくはずです：

div p {
    margin: 0;
}

Answer 2

みんなありがとう。jsfiddleを追加する必要がありました。

私は各コメントの下部にHRを使用していましたが、このHRにはプロパティの後にマージンがありました。hrを削除し、コメントを含むdivのborder-bottomを追加しました。そのため、マージンは削除されました。:)

トンありがとう！コメント用のスペースを確保するためにパディングを追加しました。

Answer 3

レイアウトが次のようなものであると仮定します。

<div>Line 1</div>
<div>Line 2</div>
<div>Line 3</div> ...

マージンをリセットするだけです。

div {
    margin:0;
}

これも適用する必要があるかもしれませんdiv:hover。

別の方法として、既存のスタイリングを調べて (ユーザー エージェントのスタイリングが原因ではない場合 -div要素にはありそうにない)、それに応じてカスタム スタイリングを変更することもできます。