CODEWITHSUNDEEP
javascripthtmlcss
user1187968
user1187968

Reputation: 8016

Calculate CSS box height by hand

I have a div with specific font size and line height. What is the correct mathematical formula to calculate the box height (including the padding)?

<div style="padding: 15px; background-color: #ccc; font-size: 18px; line-height: 1.4em;">
               text
</div>

Upvotes: 2

Views: 87

Answers (2)

scniro
scniro

Reputation: 16989

Just use .offsetHeight e.g.

var height = document.getElementById(id_attribute_value).offsetHeight;

See the HTMLElement.offsetHeight docs for more information

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, in pixels, as an integer.

If you wish to exclude the element border, .innerHeight will suffice. Also, .getBoundingClientRect() will return a fractional value (if needed)

JSFiddle Link - demo

Upvotes: 1

Code Different
Code Different

Reputation: 93181

I assume you want to do this as a mental exercise rather than using it for production. For this, you need to count the number of lines (the example is on JSFiddle)

font-size:       18px
line-height:     1.4em = 25.2px => rounded to 25px
number of lines: 7

height (no padding)   = 25 * 7 = 175px
height (with padding) = 175 + 15 * 2 = 205

Upvotes: 0

Related Questions