Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>width/height, inner/outer</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>#box{width:150px;height:60px;padding:10px;border:5px solid #ccc;margin:6px;background:#e1f5fe}</style> </head> <body> <div id="box">Box</div> <button id="measure">Measure</button> <pre id="out"></pre> <script> $("#measure").on("click", function(){ var $b = $("#box"); $("#out").text([ "width=" + $b.width(), "height=" + $b.height(), "innerWidth=" + $b.innerWidth(), "innerHeight=" + $b.innerHeight(), "outerWidth=" + $b.outerWidth(), "outerHeight=" + $b.outerHeight(true) + " (with margin)" ].join("\n")); }); </script> </body> </html>
Output