What Does jQuery outerWidth() Include?

The jQuery outerWidth() method calculates the total horizontal space occupied by an HTML element, measuring its core content width along with its padding and borders by default, with an optional setting to include margins. Understanding how outerWidth() computes these dimensions is essential for dynamic DOM manipulation, responsive scripting, and accurately aligning elements on a web page.

Default Calculation: Content, Padding, and Border

By default, calling $(selector).outerWidth() returns the width of the element including the following CSS box model properties:

  • Content width: The width of the element's actual content.
  • Padding: Both the left and right padding (padding-left and padding-right).
  • Borders: Both the left and right borders (border-left-width and border-right-width).

The default formula is: Total Width = Content Width + Left Padding + Right Padding + Left Border + Right Border

Including Margins with outerWidth(true)

The outerWidth() method accepts an optional boolean parameter. When passed true—as in $(selector).outerWidth(true)—the calculation extends to include the element's margins.

In this case, the calculation includes:

  • Content width
  • Left and right padding
  • Left and right borders
  • Left and right margins (margin-left and margin-right)

This variation represents the full footprint of the element in the document flow, making it ideal for collision detection, grid layouts, or computing spacing between adjacent elements.

To choose the right method for your calculation, compare how outerWidth() relates to other jQuery dimension methods:

  • width(): Measures only the element's content width, excluding padding, borders, and margins.
  • innerWidth(): Measures the content width plus left and right padding, excluding borders and margins.
  • outerWidth(): Measures content, padding, and borders.
  • outerWidth(true): Measures content, padding, borders, and margins.

CSS Box-Sizing Considerations

The outerWidth() method returns the computed pixel value regardless of whether the element uses box-sizing: content-box or box-sizing: border-box. While box-sizing changes how CSS applies the width property internally, outerWidth() consistently reports the final rendered outer measurement of the element on the screen.