font-size - 垂直空间线

Question

我有三行文本，我想在 height=100px;(实际上是一个图像)框附近均匀分布

我能做些什么来自动执行此操作吗？或者我是否必须计算行高并更改 paddings margins line heights 和 font sizes？

Answer 1

我的解决方案涉及包含文本行的元素的高度。由于您的 block 是 100 像素，因此您希望包含文本的 block 也是 100 像素。它也可以是三个单独的 block ，加起来为 100 像素。

这里有两个独立的解决方案，两者都有效。

HTML:

<div class="box1">box1</div>
<p class="p1">This is line 1.<br>
This is line 2.<br>
This is line 3.</p>

CSS:

.p1 {
  margin: 0;
  padding: 0;
  height: 100px;
  line-height: 33px;
  background-color: silver;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}

HTML:

<div class="box2">box2</div>
<p class="p2">This is line 1.</p>
<p class="p3">This is line 2.</p>
<p class="p4">This is line 3.</p>

CSS:

.p2, .p3, .p4 {
  margin: 0;
  padding: 0;
  height: 33.3px;
  line-height: 33.3px;
  background-color: silver;
}

.box2 {
  background-color: green;
  width: 100px;
  height: 100px;
  float: left;
}

Demo at CodePen

在第二种解决方案(单独的 block )中，您可以省略行高，第一行文本将与框的顶部对齐，其他行在其下方均匀分布。