较大的字体大小在右对齐文本中向右移动答案

【问题标题】：Larger Font Size moves right in Right Aligned Text较大的字体大小在右对齐文本中向右移动
【发布时间】：2012-09-24 06:35:23
【问题描述】：

当我更改右对齐文本的字体大小时，我遇到了奇怪的行为。当我降低字体大小时，文本向左移动。更具体地说，最右侧字符的右侧与其余字符一起以较小的字体向左更远。

HTML

<dl class="date-term">
<dt>24 Sep 2012</dt>
<dd>Lots of thinking and reading about writing this weekend, but no doing.</dd>
</dl>

CSS

p , dd
{
font-size: 1.125em;
line-height: 1.375em;
margin: 1.375em 0 1.375em 0;
color: inherit;
}
dl.date-term dt
{
float: left;
width: 5.8em;
margin-top: 0.250em;
text-align: right;
font-size: 0.8em;   /* de-emphasize */
color: #7e8b8c;     /* Make it more subdued */
}
dl.date-term dd
{
margin-left: 6.0em; /* .5em greater then width of dt above */
}

.2em 是 2 或 3 像素我的目标是让 dt 和 dd 靠得更近。有问题的页面可以看到here: 如果我减小 dt 的宽度，即使字体较小，它也会换行。我已经在 OS X 上的 Safari 和 Firefox 中尝试过。

感谢您的帮助，生硬

【问题讨论】：

你的意思是dt 和dd 靠得更近了？在你的问题中。
感谢您发现错误。

标签： html css

【解决方案1】：

要使 dt 和 dt 更接近，只需在 master.css 行号：388 上减少 dl.date-term dd 的 margin-left

dl.date-term dd {
margin-left: 5em;
}

【讨论】：

这很有效，尽管一开始并没有什么意义。我使 dd 左边距小于 dt 的宽度。你会认为它们会重叠。然后我记得在使用ems指定宽度，边距等时，实际距离是相对于字体大小的。因此，字体大小为 1em 的 6em 宽度大于字体大小为 0.8em 的 6em 宽度（以像素为单位）。用px就不会出现这个问题，但是会比较脆弱。

【解决方案2】：

删除 line-height 似乎可以解决我的问题。

可能值得研究一下字体配置的速记/其他选项： http://css-tricks.com/snippets/css/font-shorthand/

JSFiddle 示例：http://jsfiddle.net/UAbUu/

也可能值得研究使用相对值而不是 margin-top 等。

【讨论】：