До сих пор мы имели дело с горизонтальным форматированием незамещаемых блочных элементов в нормальном потоке текста. Упорядочивать замещаемые блочные элементы немного проще. Сохраняются все правила для незамещаемых блоков, за одним исключением: если значение width задано как auto, ширина элемента приравнивается к действительной ширине содержимого. Ширина изображения в следующем примере составит 20 пикселов, потому что именно такова ширина изображения, хранящегося в файле:
<img src="smile.png" style="display: block; width: auto; margin: 0;">
Если бы реальная ширина изображения была равна 100 пикселам, оно и заняло бы 100 пикселов в ширину. Это правило можно переопределить, указывая конкретное значение свойства width. Предположим, предыдущий пример изменили таким образом, чтобы изображение было представлено три раза с разными значениями ширины:
<img src="smile.png" style="display: block; width: 25px; margin: 0;">
<img src="smile.png" style="display: block; width: 50px; margin: 0;">
<img src="smile.png" style="display: block; width: 100px; margin: 0;">
Обратите внимание, что высота элемента также меняется. Когда исходная ширина замещаемого элемента меняется, значение height тоже соответственно масштабируется, если только ей не было явно присвоено собственное значение. Верно и обратное: если задана высота, а свойство width оставлено как auto, тогда ширина масштабируется пропорционально изменению высоты. Итак, вы задумались о высоте, и можно переходить к вертикальному форматированию блочных элементов в нормальном потоке.