0

How to remove extra spacing between text field and paragraph(p) element using CSS? I have specified the height, width and padding in percentages. Spacing is proper between the input elements. But spacing is not proper between the input elelment and paragraph(p) element. Can anyone please tell me the solution.

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

4 回答 4

1

你真的想要那个<p class="dob">DOB</p>吗？如果是这样，将文本的颜色更改为黑色。将 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;
}
于 2013-10-29T05:34:10.583 回答
0

如果您只想显示一些文本，请使用 <label> 标签而不是 <p> 标签。还将'dob'类的颜色css更改为#fff

于 2013-10-29T05:50:29.837 回答
0

你应该删除

<br/>

html 代码中的元素，它们会添加额外的行。

于 2013-10-29T05:31:08.650 回答
0

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

也建议不要使用br（应该是<br />，</br>不像您的示例中那样）

于 2013-10-29T05:34:58.933 回答