Question

我想设置文档的上边缘和文本行之间的距离（与下划线相同的行），例如200px，没有文本的大小（即使文本会那么大，它会去超出文件的最前沿）

enter image description here

红线显示文字的底线和文档的上边缘，我希望它们之间保持恒定的距离。文字大小可能各种

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

Answer 1

在红线的一部分创建一个div。填充顶部：200px;这个div。

Answer 2

您希望使用em间距作为保证金。 em高度是字母'm'的垂直高度。这样，当文本大小改变时，朝向顶部的间距将垂直与文本的大小成比例。

Answer 3

试试这个demo

无论字体大小如何，文字底部都是顶部的200px

<强> 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>

文字下划线边距

3 个答案: