将文本顶部与容器的顶部边框完全对齐

Question

此jsfiddle如下所示：

我希望它看起来像这样（我用MS Paint创建了这个）... flush：

我可以添加哪些样式来实现这个目标吗？

let handler_show = handler.clone();
router!(
     index:  get    "/"    => move |r: &mut Request| handler.index(r),
     show:   get    "/:id" => move |r: &mut Request| handler_show.show(r),
)

Answer 1

一种选择是使用line-height。金额取决于您使用的字体系列。优点是line-height可以直接依赖于font-size，因此它可以是动态的。但是，它没有单独垂直顶部和底部的概念（它适用于两者），因此您不会在文本下方拥有该空间。

＆＃13;

＆＃13;

div {
  border: 1px solid blue;
  font-size: 70px;
  font-family: 'Times';
  line-height: 0.7; /* This will work for any font-size on 'Times'*/
}

＆＃13;

<div>Hello</div>

＆＃13;

＆＃13;

＆＃13;

您可以通过将文本包装在带有margin-bottom的元素中来模拟底部空间。

＆＃13;

＆＃13;

div.outer {
  border: 1px solid blue;
  font-size: 70px;
}

div.inner {
  font-family: 'Times';
  line-height: 0.7;
  margin-bottom: 20px;
}

＆＃13;

<div class="outer">
  <div class="inner">Hello</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

另一种选择是使用相对定位。这种方法优于行高的一个优点是div大小不会改变。

＆＃13;

＆＃13;

div {
  border:1px solid blue;
  font-size: 64px; // works for arbitrary font sizes
}
span{
   position:relative; 
   top:-0.21em;
}

＆＃13;

<div>
  <span>Hello</span>
</div>

＆＃13;

＆＃13;

＆＃13;

与行高一样，您可能需要调整＆＃34; -0.21em＆＃34;取决于你的字体。 -0.21em对我来说对sans-serif和serif很有效，但不是草书。