How to reduce line height using materialize css input fields

Issue

I would like to reduce the line high. This is my Html code: [The picture shows the results. Line spacing is high][1]

[1]: https://i.stack.imgur.com/ekecF.png`enter code here`

<div class="row">
<h3>List</h3>
</div> <!-- End Row -->
<!-- Header -->
<div class="row">
<div class="input-field col s1"><input value="N°" type="text" disabled></div>
<div class="input-field col s2"><input value="First name" type="text" disabled></div>
<div class="input-field col s3"> <input value='Last name' type="text"disabled></div>
</div>  <!-- End row ->>
<!-- Here user inserts details -->
<div class="row">
<div class="input-field col s1"><input value="1" type="text" disabled></div>
<div class="input-field col s2"><input value="" type="text"></div>
<div class="input-field col s3"> <input value="" type="text"></div>
</div>

Solution

The problem is with materializecss they have a bottom margin for every element. here are elements with classes...

• here margin-bottom:20px in row class.

• here margin-bottom:1rem in input-field class.

• here margin-bottom:8px in input field.

you have to change their margin. if materializecss have a class like .m-0 means margin:0; like bootstrap then you have to use that else you have to use custom CSS to set every element's margin-bottom:0;

Answered By - ækit