自定义css组件之间的距离

Question

我正在使用react-d3速度表库来生成下面的仪表图。但是，我需要减少仪表图和日期之间的空间，我已经在classname中使用了填充空间，选项mt或mb，但都没有成功。

<div className="col-auto mb-3" key={esp.id}>
 <div className="card">
  <h5 className="card-header">X</h5>
   <ReactSpeedometer 
    id={"gauge-chart-" + esp.id}
    fluidWidth={true}
    minValue={0}
    maxValue={40}
    value={32}
    valueFormat={'d'}
    customSegmentStops={[0, 10, 20, 30, 40]}
    segmentColors={['#a3be8c','#ebcb8b', '#d08770', '#bf616a']}
    labelFontSize={'10px'}
    valueTextFontSize={'28px'}
    valueTextFontWeight={'500'}
    paddingHorizontal={17}
    paddingVertical={17}
    currentValueText="#{value}˚C"
    currentValuePlaceholderStyle={"#{value}"}
    textColor={textColor}
    />
    <p className="prog_temp text-secondary mt-1">30/10/2020 10:43:44</p>
    <p className="prog_temp text-info mt-1">Temperature: 33˚C</p>
    <button type="button" className="btn btn-outline-info btn-sm btn-block">Temperature Ajust</button>
    <button type="button" className="btn btn-outline-success btn-sm btn-block">Status Ajust</button>
 </div>
</div>

我是CSS文件

.prog_temp {
    text-align: center !important;
}

你还能用什么其他方法来减少CSS的空间呢？

enter link description here

Answer 1

该空间首先被创建，因为

标签，其次是由于字体本身的原因。在将边距和填充设置为0并减小或增大字体大小后，尝试使用line-height。

p
{
  margin:0;
  padding:0;
  font-size:60px;
  line-height:30px;
}