0

これは、20pxx20pxの「定規」を含むかなり短いフィドルです。pタグの高さは20px...10pxのテキスト、上下のパディングは10 px（5px + 5px）になると思います。

しかしそれは約22pxであるように見えます。

http://jsfiddle.net/BNnhp/30/

マージン0px、パディング0px、行の高さ100％を使用して、bodyタグ、pタグ、divタグをリセットしました。

以前は、line-heightを100％に設定することで修正された同様の問題がありましたが、これはここでは機能しませんか？

正確な原因を知りたい-CSSの属性と値。

しかし、テストの目的で、jsfiddleの正規化ボックスをクリックしましたが、これも効果がありませんでした。

ここにさらにリセットを追加しました：

http://jsfiddle.net/BNnhp/32/

4

3 に答える 3

1

小さなテストケースを作成しましたが、そこでは問題なく動作しました。それで、私はあなたの答えに戻りました、そしてあなたがpのdisplay値をに設定しているのを見つけましたinline、それは2px-3pxの違いを引き起こしていました（修正されたバージョン）。修正するには、CSSを次のように変更します（コメントを参照）。

/* ... */
#hold_name{
  padding: 5px 5px 5px 5px;
  /* position:relative; -- Don't need */
  /* top: 0px; -- Don't need */
  color:#000000;
  /* display:inline; -- Don't need */
  background: #ffffff;
  font-size: 10px;
  margin:0; /* Need to add */
  line-height:100%;
}
#hold_name:hover{
}
#wrap{    
  position: absolute;
  top: 20px; /* Change to 20px from 24px */
  visibility: hidden;
  margin: 0;
  padding: 0;
  border-left: 1px solid #007fa5;
  border-bottom: 1px solid #007fa5;
  border-right: 1px solid #007fa5;
}
/* ... */
于 2012-07-23T20:55:55.410 に答える
1

が10pxに設定されているという事実font-sizeは、高さも10pxになることを約束するものではありません。一部の特定の文字/記号は他の文字よりも高くなっています。

これをに変更する場合は、次のように8pxと言います。

#hold_name{
    font-size: 9px;
}

次に、コンテナのサイズも変更されます。これは、

タグは、内部にテキストが含まれるようにサイズを変更します。あなたはあなたのために特定の高さを設定することができます

同様に、それは変わるでしょう：

#hold_name{
    font-size: 9px;
    height: 10px;
}

<p>これにより、フォントサイズに関係なく、含まれている要素が10ピクセルの高さに設定されます。

上下の5pxのパディングと組み合わせると、合計で10px + 5px + 5px=20pxの高さになります。

于 2012-07-23T20:57:45.057 に答える
0

他の回答を考慮しながら、のパディング属性を次のように変更して.menu-dropから、行の高さを20pxに追加することもできます。

.menu_drop{    
  position: relative;
  margin: 0;
  padding: 0 10px; /* modified padding value */
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  background: #bfddec;
  color: #2875DE;
  font: 11px arial;
  line-height: 20px; /* new line-height property */
}
于 2012-07-23T21:01:56.463 に答える