如何减少圆内第一线和第二线之间的压痕？

Question

这个问题确实给我带来了麻烦。

我有个圈子。该圆是一个方形， border-radius：50％。它也是灵活的。

第一行包含一个图标，第二行包含文本。

我的问题是他们之间有很大的缩进，我希望他们彼此更接近。我无法想出如何解决这个问题。

JSFiddle

HTML

<ion-content has-header="false">
  <div class="dashboard-grey-menu">
  <div class="flex row no-padding">
   <div class="col">
     <div class="circle" ui-sref='clients'>
       <div class="ion-ionic"></div>
       <div>Second line</div>
     </div>
   </div>
  </div>
 </div>
</ion-content>

CSS

.dashboard-grey-menu {
  height: 23vh;
  background-color: #959595;
}

.circle {
  border-radius: 50%;
  width: 18vw;
  height: 18vh;
  background-color: #D0D0D0;
  font-size: 1em;
  font-weight: 900;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: column;
}

你会如何解决这个问题？提前谢谢！

Answer 1

解决方案1：将$id=$_GET['id']; //id fetched from the URL $id = (int) $id; 添加到您的第二个div 解决方案2：从css中的.circle中删除style="padding-bottom:8vh，因为这个空间的主要原因是那个。 U应该使用padding或margin css命令，使用vh不丢失责任