Замещаемые элементы

До сих пор мы имели дело с горизонтальным форматированием незамещаемых блочных элементов в нормальном потоке текста. Упорядочивать замещаемые блочные элементы немного проще. Сохраняются все правила для незамещаемых блоков, за одним исключением: если значение width задано как auto, ширина элемента приравнивается к действительной ширине содержимого. Ширина изображения в следующем примере составит 20 пикселов, потому что именно такова ширина изображения, хранящегося в файле:


Если бы реальная ширина изображения была равна 100 пикселам, оно и заняло бы 100 пикселов в ширину. Это правило можно переопределить, указывая конкретное значение свойства width. Предположим, предыдущий пример изменили таким образом, чтобы изображение было представлено три раза с разными значениями ширины:


Обратите внимание, что высота элемента также меняется. Когда исходная ширина замещаемого элемента меняется, значение height тоже соответственно масштабируется, если только ей не было явно присвоено собственное значение. Верно и обратное: если задана высота, а свойство width оставлено как auto, тогда ширина масштабируется пропорционально изменению высоты. Итак, вы задумались о высоте, и можно переходить к вертикальному форматированию блочных элементов в нормальном потоке.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание