如何使用具体化 css 输入字段来减少行高答案

【问题标题】：How to reduce line height using materialize css input fields如何使用具体化 css 输入字段来减少行高
【发布时间】：2022-01-25 11:04:45
【问题描述】：

我想降低线高。这是我的 HTML 代码： [图片显示结果。行距高][1]

[1]：https://i.stack.imgur.com/ekecF.png`enter 此处代码`

<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>

【问题讨论】：

能否请您创建一个codepen，因为它可以更好地解释问题。
@khalil。我提供了 html 代码和显示我得到的结果的图片。我需要减少行高（行距）。谢谢。
能否也分享一下css？
@khalil。我没有使用任何CSS。只是在html文件的头部使用了materializecss的链接。
可以减少输入字段的height属性，也可以减少标签上transform: translateY(12px)的值，这样可以使输入字段变短

标签： html css

【解决方案1】：

问题在于 materializecss 每个元素都有下边距。这是带有类的元素...

这里是 margin-bottom:20px 在排课中。
这里margin-bottom:1rem 在输入字段类中。
这里是margin-bottom:8px 在输入字段中。

你必须改变他们的保证金。如果 materializecss 有一个像 .m-0 这样的类意味着 margin:0; 像 bootstrap 那么你必须使用它，否则你必须使用自定义 CSS 来设置每个元素的 margin-bottom:0;

【讨论】：