I'm looking to reduce the spacing between the list elements in this code snippet. Despite trying line-height:1.5em;, I haven't been successful in achieving the desired effect. The screenshot below illustrates how it currently appears with more space than I'd like. Any suggestions on how I can adjust this?
https://i.sstatic.net/P2ZOO.jpg
This is my attempted solution:
<ul class="list-unstyled" style="line-height: 1.5em;">
<li>
<strong>
<h4 for="">Car Detail:</h4>
</strong>
</li>
<li>
Engine:
<mat-form-field>
<input type="number" matInput placeholder="">
</mat-form-field>
</li>
<li>
Torque:
<mat-form-field>
<input type="number" matInput placeholder="">
</mat-form-field>
</li>
<li>
Top Speed:
<mat-form-field>
<input type="number" matInput placeholder="">
</mat-form-field>
</li>
<li>
Target Speed:
<mat-form-field>
<input type="number" matInput placeholder="">
</mat-form-field>
</li>
<li>
Total Cost:
<mat-form-field>
<input type="number" matInput placeholder="">
</mat-form-field>
</li>
</ul>