Why padding is included in height sometimes?

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).

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.)