CODEWITHSUNDEEP
htmlcsstextarea
theStandard
theStandard

Reputation: 212

HTML/CSS Textarea and Div are different height

I've styled a textarea with min/max width and min height (to allow scaling vertically, but in no other direction), and put a div next to it with the same height. For some reason, although the CSS doesn't lie they're different heights. Anyone know why and if there's a way to fix this other than to adjust the height of either element?

CSS:

#textarea {
    float: left;
    display: block;
    margin-left: 30px;
    min-width: 300px;
    max-width: 300px;
    min-height: 200px;
    border: 1px dashed black;
}
#output {
    float: left;
    display: block;
    margin-left: 30px;
    width: 300px;
    height: 200px;
    border: 1px dashed black;
}

Fiddle

Upvotes: 1

Views: 597

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241238

In most browsers, the textarea element has default padding.

In Chrome the element has 2px of padding on each side, and in IE/FF it has 1px of padding on each side. You need to remove the padding if you want both elements to have the same height:

Updated Example

#textarea {
    padding: 0;
    float: left;
    display: block;
    margin-left: 30px;
    min-width: 300px;
    max-width: 300px;
    min-height: 200px;
    border: 1px dashed black;
}

You could also change the box model to include the element's padding/border in the width/height calculations by changing box-sizing to border-box:

Updated Example

#output, #textarea {
    box-sizing: border-box;
}

Upvotes: 3

Related Questions