Skip to content
Related Articles
Open in App
Not now

Related Articles

How to get inner width (excluding the border) of an element using jQuery ?

Improve Article
Save Article
  • Last Updated : 13 Jul, 2022
Improve Article
Save Article

We can get the inner width of any element using the jQuery innerWidth() method. The innerWidth() method returns the inner width of the first matched element including padding but not border.



So the inner width of an element is shown in the below image.

Inner width

The inner width of an element is the sum of the width of an element and padding around that element. We do not include Border and Margin while calculating the inner width of any element.

Example: The following example demonstrates the inner width of the “p” element of HTML by using the button click event.


<!DOCTYPE html>
    <!-- jQuery library -->
    <script src=
    <button>Click to know the inner width of p tag</button>
      $("button").click(function () {
        $("p").text("Inner Width : " + $("p").innerWidth());


on click get inner width

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!