文字下划线边距答案

【问题标题】：Text underline margin文字下划线边距
【发布时间】：2012-10-13 01:19:45
【问题描述】：

我想设置文档顶部边缘和文本行之间的距离（与下划线相同的行），例如 200px，不管文本有多大（即使文本会那么大超出文档的上边缘）

红线显示文本的底部和文档的顶部边缘，我希望它们之间的距离恒定。文字大小可能不同

http://jsbin.com/azanuw/9/edit - 示例 - 如何使他们的底线具有相同的顶部位置。

【问题讨论】：

你试过什么？它看起来像 display:inline-block 和文本上的顶部填充或边距应该做你需要的？
那不是为我做的事情（也许我做错了什么）。我会这样解释：我们的页面是方格笔记本，你必须在第 5 行写标题，在第 7 行写副标题，在第 9 行写内容，不管你的字母有多大。
那么你想要一个固定高度的块元素，文本进入

标签： css text margin

【解决方案1】：

在红线的一部分创建一个 div。给 padding-top:200px;对于这个 div。

【讨论】：

额外的语法通常是不受欢迎的。如果您想要这种方法，最好使块级元素具有top:200 的绝对位置

【解决方案2】：

您想使用em 间距作为边距。 em 高度是字母“m”的垂直高度。这样，当文本大小发生变化时，顶部的间距将与文本大小垂直成比例。

【讨论】：

jsbin.com/azanuw/9/edit 同样的事情。如何使他们的底线在相同的顶部位置。

【解决方案3】：

试试这个demo

无论字体大小如何，文本底部距离顶部 200 像素

CSS

body {background:#000; margin:0;}
.topNav {color:#fff; height:200px; border:solid 1px #f00; position:relative; }
.text {position:absolute; bottom:0px;font-size:20px;}

HTML

<body>
  <div class="topNav">
    <div class="text">Some text goes hear</div>

  </div>
</body>

【讨论】：

jsbin.com/azanuw/9/edit 我已经编辑了你的代码。改变了文字大小。可以清楚地看出，它们的“下划线”与顶部边缘的距离不同。（如果字母表的底部没有 g、p、j 等字母，那应该没问题）