Question

我想用简单的文字标识创建屏幕范围的标题。挑战是让它触及容器的顶部和底部边框like so （......以及它的半高变化）。

首先，我注意到在HTML中有一种字体构建的顶部和底部边距，可以防止顶部和底部容器的边框接触文本。为了解决这个问题，我使用了line-height属性（猜测它的正确值......）。

我结束了这个：https://jsfiddle.net/2ukfc8e7/8/

有更好的解决方案吗？

Answer 1

更新

body {
  padding: 0;
  margin: 0;
}
div {
  font-family: 'Open Sans', sans-serif;
  font-size: 48px;
  background-color: gray;
  color: white;
  border: 0;
  padding: 0;
  margin: 0;
  height: 34px;
  line-height: 30px;
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<div>
  <b>ABOF</b>
</div>

Answer 2

事实证明，可能没有比我原来的想法更好的解决方案了。

标记内的每行文字都有一定的水平和垂直空间，不应与margin / padding属性混淆。我们可以使用line-height属性定义该空间。降低其值，我们使上边界和下边界彼此更接近 - 并且 - 与文本行相交。

我使用line-height属性转换制作了代码段（下方）以显示所描述的方法（在花哨的慢动作中）。

＆＃13;

/* RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto';
}

p {
  font-weight: normal;
}

header {
  line-height: 1.5;
  font-size: 2rem;
  
  /* Irrelevant part */
  font-weight: 900;
  color: white;
  background-color: gray;
  overflow: hidden;
 
  /* Transition stuff*/
  transition-property: line-height;
  transition-duration: .5s;
}
header:hover {
  line-height: .67;
}

＆＃13;

<link href='https://fonts.googleapis.com/css?family=Roboto:900,400' rel='stylesheet' type='text/css'>

<body>
  <p>Hover header below to see transition from <b>'line-height: 1'</b> to <b>'line-height: 0.67'</b>
  </p>
  <header>ABOF</header>
</body>

＆＃13;

使用触摸顶部和底部边框的文本创建标题的最佳方法

2 个答案:

更新