Question

如何使用CSS删除文本字段和段落（p）元素之间的额外间距？我已经指定了高度，宽度和填充百分比。输入元素之间的间距是正确的。但输入元素和段落（p）元素之间的间距不合适。任何人都可以告诉我解决方案。

Below is my code snippet:
<head>
    <style type="text/css">
            .mainview{
            margin: 0;
            width: 100%;
            height: 100%;
            white-space:pre-wrap;
            overflow:scroll;
            padding-top: 5%;
            padding-bottom: 5%;
            background: url(mainview.png);
            position: relative;
        }

        .in{
            font-family: Arial;
            font-size: 18pt;
            left: 20%;
            right: 20%;
            width:60%;
            position: absolute;

        }

        .dob{
            font-family: Arial;
            font-size: 18pt;
            color: #FFFFFF;
            left: 20%;
            right: 20%;
            width:60%;
            position: absolute;

        }
    </style>
</head>
<body>
<div class="mainview" style="overflow-y: scroll;">
            <input type="text" placeholder="Firstname" class="in" />
            </br>
            <input type="text" placeholder="Lastname" class="in"/>
            </br>
            <p class="dob">DOB</p>
            </br>
            <input type="email" placeholder="Email" class="in"/>
        </div>
</body>

Answer 1

你真的想要DOB吗？如果是这样，将文本颜色更改为黑色.. 更改dob类如下：

.dob {
font-family: Arial;
font-size: 18pt;
color: #000;
left: 20%;
right: 20%;
width: 60%;
position: absolute;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
}

Answer 2

你应该删除

<br/>

你的HTML代码中的

元素，它们会添加额外的行。

Answer 3

默认情况下可能会有一些填充/边距。

建议不要使用br（样本中应为 ，而不是）

Answer 4

如果您只想显示一些文字，请使用＆lt; label＆gt;标签代替＆lt; p＆gt;标签。也将'dob'类的颜色css更改为#fff

在文本字段和html </p>中的<p>元素之间观察到额外的间距

4 个答案: