О перемещении элементов необходимо помнить несколько моментов. Прежде всего, перемещаемый элемент некоторым образом удален из нормального потока документа, хотя все равно влияет на компоновку. Это совершенно уникально для CSS: перемещаемые изображения существуют практически в своей собственной плоскости, но все-таки влияют на остальной документ. Это влияние обусловлено тем фактом, что остальное содержимое «обтекает» свободно перемещаемый элемент. Так ведут себя перемещаемые изображения, но то же происходит и при перемещении, скажем, абзаца.Эффект хорошо виден благодаря полю, добавленному в перемещаемый абзац:

p.aside {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em;
border: 1px solid;}

Прежде всего следует отметить, что поля вокруг перемещаемых элементов не сворачиваются. Если изображение окружить 20-пиксельным полем, то вокруг изображения останется минимум 20 пикселов пустого пространства. Если расположенные рядом с изображением другие элементы – соседи по вертикали и горизонтали – также имеют поля, то эти поля не будут поглощаться полями перемещаемого изображения:

p img {float: left; margin: 25px;}

Вспомним аналогию с листком бумаги, имеющим прозрачные поля: поля вокруг изображения никогда не перекрывают поля, окружающие другие перемещаемые элементы. Перемещая незамещаемый элемент, необходимо объявить его ширину. В противном случае согласно спецификации CSS ширина элемента будет равна нулю. Таким образом, ширина перемещаемого абзаца была бы равной одному символу (если один символ – это минимальное значение, предоставляемое броузером для свойства width). Если не объявить значение свойства width для перемещаемого элемента, то в результате можно получить нечто похожее на рис. 10.4. (Слава богу, это маловероятно, но тем не менее возможно.)

Добавлено: 18 Июля 2018 21:35:54 Добавил: Андрей Ковальчук Нравится 0

Добавить