# What is the difference between width and innerWidth in jQuery?

jQueryWeb DevelopmentFront End Technology

Width in jQuery

The width is the horizontal measurement of the container, for example, width of a div. It excludes the padding, border, or margin.

## Example

You can try to run the following code to learn how to get the width of an element in jQuery:

Live Demo

<!DOCTYPE html>
<html>
<script>
$(document).ready(function(){$("button").click(function(){
alert("Width of div element: " + $("div").width()); }); }); </script> </head> <body> <div style="height:200px;width:400px;padding:20px;margin:1px;border:1px solid red; background-color:gray;"></div><br> <button>Get Width of div</button> </body> </html> innerWidth in jQuery The innerWidth() returns the inner width of the first matched element. It includes padding, but not border and margin. ## Example You can try to run the following code to get the inner width in jQuery: Live Demo <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script>$(document).ready(function(){
$("button").click(function(){ alert("Inner Width of div element: " +$("div").innerWidth());
});
});
</script>