CODEWITHSUNDEEP
htmlcss
Apoorva sahay
Apoorva sahay

Reputation: 1930

Why height of paragraph and text box is not same in a Div?

I have created a div with two child elements.

I have provided same height to both of them but on browser I am not getting same height for them.

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

MY 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;    
}

Here if the fiddle for the same. http://jsfiddle.net/apoorvasahay01/mByYC/1/

Please let me know what could have gone wrong here.

Upvotes: 3

Views: 1644

Answers (4)

user2169391
user2169391

Reputation:

When you display a block element like p as inline it gets the height from the line-height attribute which you haven't set. To get what you intent you should rather display it as inline-block or set the line-height. http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ has a nice explanation.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use display: inline-block instead of inline.

demo

Or use display: table-cell and add display: table-row to .textWbutton

demo

Upvotes: 3

Praveen
Praveen

Reputation: 56509

Use padding to fit it same as input.

.textWbutton p {
font-size: 15px;
margin: 0px;
height: 30px;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid black;
padding: 8px;
}

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

That is because you have not made a reset of their custom attributes. Like <p> and <input> by default have some padding and margin and when you add a height, it populates accordingly.

Upvotes: 5

Related Questions