Question

我得到了一个包含2行文字的圆圈。第一个说：P 第二个说：出版物。

它们之间的空间目前太大了。有没有办法让空间变小？

.circle1 {
  font-family: Arial;
  text-align: center;
  background: #73B7DB;
  border-radius: 100px;
  width: 110px;
  height: 105px;
  padding-top:5px;
  color: #fff;
  margin: 0 auto;
}
.Capital {
  margin: 0px 0 0px 0;
  line-height:70px;
  font-size: 60px;
  font-weight:ligter;
}
.text {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100;
  font-size: 15px;
}

<div class="circle1">
  <h2 class="Capital">P</h2>
  <span class="text">Publications</span>
</div>

Answer 1

尝试否定margin。就像margin: 0px 0 -10px 0的{{1}}一样。

＆＃13;

.Capital

＆＃13;

.circle1 {
  font-family: Arial;
  text-align: center;
  background: #73B7DB;
  border-radius: 100px;
  width: 110px;
  height: 105px;
  padding-top: 5px;
  color: #fff;
  margin: 0 auto;
}

.Capital {
  margin: 0px 0 -10px 0;
  line-height: 70px;
  font-size: 60px;
  font-weight: ligter;
}

.text {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100;
  font-size: 15px;
}

＆＃13;

Answer 2

将.Capital类的行高更改为更小的值就可以了。

.Capital {
    margin: 10px 0 0px 0;
    line-height: 50px;
    font-size: 60px;
    font-weight: ligter;
}

这将使它看起来更加集中。

如何减少圆圈中两行文本之间的空间

2 个答案: