Размеры

Переварили предыдущий раздел? Хорошо, теперь настал черёд методов, которые работают с размерами элементов.

Но прежде чем продолжить, рекомендую освежить в памяти информацию о вычислении высоты и ширины блочных элементов ;)

height()	возвращает высоту элемента за вычетом отступов и границ; если у нас несколько элементов в выборке, то вернётся первый; значение, в отличие от метода css("height"), возвращается без указания единиц измерения
height(height)	устанавливает высоту всех элементов в выборке; если значение высоты передано без указания единиц измерения, то это будут пиксели px

Памятка из мануала

$(window).height();   // высота окна
$(document).height(); // высота HTML документа

Методы width() и width(width) – ведут себя аналогично методу height(), но работают с шириной элемента:

width()	возвращает ширину элемента за вычетом отступов и границ; если у нас несколько элементов в выборке, то вернётся первый; значение возвращается без указания единиц измерения
width(height)	устанавливает ширину всех элементов в выборке; если значение высоты передано без указания единиц измерения, то это будут пиксели px

Методы height() и width() не изменяют своего поведения в зависимости от выбранной блочной модели, т.е. они всегда возвращают параметры области внутри margin, padding и border элемента.

innerHeight() innerWidth()	возвращают, соответственно, высоту и ширину элемента, включая padding
outerHeight() outerWidth()	возвращают высоту и ширину элемента, включая padding и border
outerHeight(true) outerWidth(true)	возвращают высоту и ширину элемента, включая padding, border и margin

Для наглядности различий между методами height(), innerHeight() и outerHeight() я создал следующий пример:

Пример вычисление «высот»anton.shevchuk.name

В данном примере для центрального элемента c id=block заданы следующие стили:

#block {
  height: 40px;
  margin: 40px;
  padding: 40px;
  border: 40px solid #777;
}

Теперь посмотрим на то, что будет возвращать каждая из перечисленных функций:

alert(`
  height()          = ${$("#block").height()}
  innerHeight()     = ${$("#block").innerHeight()}
  outerHeight()     = ${$("#block").outerHeight()}
  outerHeight(true) = ${$("#block").outerHeight(true)}
`);

Чтобы легче понять происходящее, я ещё немного заморочился и переделал несколько картинок из официальной документации в одну полноценную иллюстрацию:

блочная модель