Why is the addition sometimes included in height?

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 a text area with some padding inside it. In those cases when it works absolutely normally, the height of the text area is 20 pixels in increments of 5 pixels, not included in the height. But in some cases, the height of the text area includes padding, and the height is reduced to 8 pixels. I searched for any css if you override it, but I did not find it. And I compared the result in both cases. On the left is the reduced height, and on the right is the expected height.

I can fix this problem in other cases, specifically controlling the height by adding! Important or using some kind of JavaScript. But, I wonder what the reason here is making such an effect. Why and in what cases gaskets are included with height or width?

Answer 1

It depends on which box-sizing attribute you used:

• border-box means that the height and width of the field defined / computed in CSS will also contain the indentation and width (s) of the border applied to it
• content-box is the default behavior in which padding (spaces) and border width (s) are added to a specific / calculated height and field width.

By setting box-sizing: border-box , as shown in the left example, you set the element height to 20px. This means that the actual content field will only be 8px tall, because the browser subtracts the border (top 1px, bottom 1px) and the indents (top 5px, top 5px) form a certain height, leaving only 8px to the left, which is a little bit just a bit is too short to contain the height of the entire line (so the word seems cut off).

Answer 2

In case this comes in handy for someone, jQuery seems reliable in this:

• .height() does not include padding (even where the block size is: border-box)
• .outerHeight() includes padding and border
• .outerHeight(true) includes padding and borders and margins

Everyone can set or get , for example, $element.outerHeight(desired_height_including_margins, true);