Why padding is included in height sometimes?

Question

I have a text area and I added some CSS to it

<textarea watermark="Have a question? ..." class="test-input" rows="4" cols="15" name="">Have a question? ...</textarea>

and CSS applied to it -

.test-input {
    border: 1px solid #D0D0D0;
    border-radius: 3px 3px 3px 3px;
    color: #646464;
    float: left;
    font-family: Arial;
    font-size: 12px;
    height: 20px;
    margin: 0 0 0 15px;
    padding: 5px;
    resize: none;
    width: 264px;
}

And I get the text area with some padding inside it. In the cases when it works absolutely fine, text area height comes to be 20px with 5px padding not included in height. But, in few cases height of the text area includes padding and the height gets reduced to 8px. I have looked for any css if its overriding it but I didn't find. And I compared the result in both cases. Left is the reduced height and right is the expected height.

enter image description here I can fix this issue, in other case managing height specifically, adding !important or with help of some JavaScript. But, I am wondering what's the cause here that's making such effect. Why and in which cases paddings are getting included with height or width?

Try not to add height to input fields and textareas, try to control the height using padding, text size and line height - if an end user increased their font size for accessibility reasons, then the fields are likely to be unusable — James King, Mar 11 '13 at 10:29

score 51 · Accepted Answer · answered Mar 11 '13 at 10:16

51

That depends on what box-sizing attribute you have used:

border-box means that the height and width of the box, defined/calculated in CSS, will also include the padding(s) and border width(s) applied to it
content-box is the default behavior, where padding(s) and border width(s) are added onto the defined/calculated height and width of the box.

By setting box-sizing: border-box as seen in your left example, you have defined the height of the element at 20px. This means that the actual content box will only be 8px tall, because the browser will subtract the border (1px top, 1px bottom) and padding (5px top, 5px bottom) form the defined height, leaving only 8px left, which is a tad bit too short to contain height of the entire line (therefore the word appears to be cut off).

answered Mar 11 '13 at 10:16

Terry

63,248
15
96
118

Yes Terry, I agree with you. :) But normally, we do not set box-sizing specifically, and default behavior is 'content-box'. Even then this happens sometimes and this was the case which made me think. You may see there in the style for that textarea. Or MAY BE I am missing something here. – Ashmah Mar 11 '13 at 11:22
1

@Ashmah I typically use `box-sizing: border-box` for input fields, based on the virtue that it's almost impossible to get all browsers to render input elements identically (down to the pixel). Using the `border-box` constraint forces the browser to render the input, regardless of inner box height, to the specified height. This is especially useful when you're following a strong grid design, where pixel precision means everything :) – Terry Mar 11 '13 at 11:31
Thanks Terry! for the detailed explanation. I am sure this would always be in mind when I will work with such things... :) – Ashmah Mar 11 '13 at 11:55
A late thank you! It took me a while to understand why the ` – BurninLeo Mar 15 '15 at 21:16

Bob Stein · Answer 2 · 2020-04-05T10:21:44.303

2

jQuery seems consistent with these definitions:

.height() does not include padding (even where box-sizing: border-box)
.innerHeight() includes padding but not border
.outerHeight() includes padding and border
.outerHeight(true) includes padding and border and margin

Each can set or get, e.g. $element.outerHeight(desired_height_including_margins, true);

(Images excerpted from linked pages.)

edited Apr 05 '20 at 10:21

answered Sep 29 '19 at 18:28

Bob Stein

16,271
10
88
101

score 1 · Answer 3 · answered May 03 '20 at 09:21

Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing,

The box-sizing property can be used to adjust this behavior:

content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Why padding is included in height sometimes?

3 Answers3