0

这是一个非常短的小提琴，其中包括一个 20 像素 x 20 像素的“标尺”。我希望我的 p 标签高 20 像素...10 像素文本，顶部和底部填充 10 像素（5 像素 + 5 像素）。

但是它看起来大约是 22px。

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

我已经使用margin 0px、padding 0px和line-height 100%重置了body标签、p标签和div标签。

以前我有一个类似的问题，通过将 line-height 设置为 100% 来解决....但这在这里不起作用？

我想知道确切的原因 - CSS 属性和值。

但是出于测试目的，我单击了 jsfiddle 中的规范化框，这也没有效果。

在此处添加了更多重置：

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

4

3 回答 3

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 回答
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 回答
0

在考虑其他答案的同时，您还可以更改 的 padding 属性.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 回答