Как вы уже знаете, любой элемент Web-страницы занимает в окне Web-браузера некоторую прямоугольную область. Эта область имеет как внутренние, так и внешние отступы, а также содержит реальную или воображаемую границу. Тип блочной модели зависит от формата документа. Если тег <!DOCTYPE> указан, то блочная модель соответствует стандартам консорциума W3C. Реальные размеры элемента вычисляются так:
Реальная ширина = margin-left  + border-left-width + padding-left  +
                  width + padding-right + border-right-width + margin-right
Реальная высота = margin-top + border-top-width + padding-top + height +
                  padding-bottom + border-bottom-width + margin-bottom

Если тег <!DOCTYPE> не указан, то Web-браузер Internet Explorer переходит в режим совместимости (Quirks Mode). В этом режиме padding и border входят в состав width и height, а следовательно, реальные размеры будут другие:
Реальная ширина = margin-left  + width + margin-right
Реальная высота = margin-top + height + margin-bottom

Поэтому при отсутствии тега <!DOCTYPE> разные Web-браузеры могут по-разному отображать Web-страницу. (1)