Html 为什么Div中段落和文本框的高度不同？_Html_Css

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

html css

Html 为什么Div中段落和文本框的高度不同？,html,css,Html,Css,我创建了一个包含两个子元素的div 段落带有文本类型的输入我为他们提供了相同的高度，但在浏览器上，我并没有为他们提供相同的高度我的html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="./StyleSheet.css"> </head> <body> <d

我创建了一个包含两个子元素的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>

这里的小提琴也一样

请告诉我这里可能出了什么问题。

这是因为您没有重置它们的自定义属性。默认情况下，像

和
一样，都有一些填充和边距，当您添加高度时，它会相应地填充。
使用填充将其与输入匹配
.textWbutton p {
font-size: 15px;
margin: 0px;
height: 30px;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid black;
padding: 8px;
}

使用display:inline块
而不是inline

或者使用display:table单元格
并将display:table行
添加到.textWbutton
当您将像p这样的块元素显示为内联时，它会从尚未设置的“线高度”属性中获取高度。为了得到您想要的，您应该将其显示为内联块或设置线高度。
有一个很好的解释。
请使用
以获得可访问性和可用性。@我已经用标签替换了p，但我在浏览器上得到了相同的结果。我不能期望得到比这更好的答案：）因此添加类似填充的内容：0；边距：0
在设置其左右填充之前。是-@MichaelPeterson理想情况下，因为css重置必须声明为一致性，如Yep@NathanLee，同意。我自己也使用类似的方法。@Apoorvasahay-从您的代码片段中，可以找到类似于display:inline block或显示：表格单元格。但是，如果您从长远的角度来看您的解决方案，我建议您使用CSS重置，正如我在上面的评论中提到的。
.textWbutton p {
font-size: 15px;
margin: 0px;
height: 30px;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid black;
padding: 8px;
}