CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

Puc. 10.46. Значение свойства right в сверхограниченной ситуации игнорируется

тивном случае он игнорирует left) и вычисляет его. Иначе говоря, аналогичный результат (рис. 10.46) мы получили бы, если бы объявили:

<span style="position:absolute; top:0; left:1em; right:12em; width:10em; margin-left:1em; margin-right:1em; background:silver;">shrink-wrapped</ span>

Если бы для одного из полей было оставлено значение auto, менялось бы оно. Предположим, стили изменены так:

<span style="position:absolute; top:0; left:1em; right:1em; width:10em; margin-left:1em; margin-right:auto; background:silver;">shrink-wrapped</ span>

Визуально результат будет аналогичен представленному на рис. 10.46, только он будет получен путем вычисления значения правого поля в 12em, а не переопределения значения свойства right. Если же присвоить auto левому полю, тогда око будет вычислено, как показано¹ на рис. 10.47:

Рис. 10.47. Значения свойств margin в сверхограниченной ситуации

<span style="position:absolute; top:0; left:"lem; right:lem; width:10em;

margin-left:auto; margin-right:lem; background:silver; ">shrink-wrapped</ span>

В общем, если значение auto задано только для одного свойства, то именно оно будет меняться, чтобы удовлетворить уравнению, приведенному ранее в этом разделе. В соответствии со следующими стилями элемент по ширине развернется до любого нужного размера, а не «обожмет» содержимое:

<span style="position:absolute; top:0; left:1em; right:lem; width:auto; margin-left:1em; margin-right:1em; background:silver; ">shrink-wrapped</ span>

До сих пор нас интересовали только события, происходящие на горизонтальной оси, но очень похожие правила действуют и для верти-

1  Отображение зависит от агента пользователя. Показано для броузера Fire-fox 1.5.0.7. Но, например, для IE 6.0 результат соответствует значению margin-left:0. - Примеч. науч.ред.