html - 为什么段落和文本框的高度在 Div 中不相同?

标签 html css

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

我的 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;    
}

这里如果 fiddle 一样。 http://jsfiddle.net/apoorvasahay01/mByYC/1/

请让我知道这里可能出了什么问题。

最佳答案

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

关于html - 为什么段落和文本框的高度在 Div 中不相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17739171/

相关文章:

HTML 元素在多个奇怪的点插入到 DOM 中

javascript - 最后一个下拉菜单无法根据前一个下拉菜单工作

html - 将两个内部 div 堆叠在一起,同时可能保持 float

javascript - 文本之间具有相等间距的行内 block 列表。

带有悬停垂直子菜单的 CSS 水平菜单

css - HTML5 slider 的拇指不能覆盖轨道

android - webView.canGoBack() 在使用 loadDataWithBaseURL() 时不起作用

javascript - 使用 JavaScript 对表值进行升序和降序排序

html - Kineticjs 与 Raphaeljs

Javascript 简单的动画循环