为什么Div中段落和文本框的高度不一样？

Question

为什么Div中段落和文本框的高度不一样？

我创建了一个带有两个子元素的div.

一个段落
带有文本类型的输入.

我为它们提供了相同的高度但是在浏览器上我没有得到相同的高度.

我的HTML

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="./StyleSheet.css">
</head>
<body>
    <div class="textWbutton">
        <p>Enter Name</p>
        <input type="text" placeholder="I am placeholder" />
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我的CSS

html,body
{
    font-size: 0px;
}

.textWbutton
{
}

.textWbutton input[type='text']
{
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;

    height: 30px;
    display: inline;

    border-radius: 0px 5px 5px 0px;
    border: 1px solid Black;
}

.textWbutton p
{
    font-size: 15px;
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;

    height: 100%;
    display: inline; 
    border-radius: 5px 0px 0px 5px;
    border: 1px solid Black;    
}

Run Code Online (Sandbox Code Playgroud)

这里如果小提琴相同.http://jsfiddle.net/apoorvasahay01/mByYC/1/

请告诉我这里可能出现的问题.

Answer 1

Nit*_*esh 5

那是因为您没有重置其自定义属性.喜欢<p>并且<input>默认情况下有一些填充和边距,当你添加一个高度时,它会相应地填充.

归档时间：	13 年，1 月前
查看次数：	1093 次
最近记录：	13 年，1 月前