Margin (padding) для img

[Arinden]

Добрый вечер. Подскажите пожалуйста, вот такая схема:

<ul>
 <li><span><img /><a></a></span><li>
 ...
<ul>

Почему если применять к img или a - margin или padding - смещаются оба элемента и img и a?

[cssview]

Добрый вечер. Подскажите пожалуйста, вот такая схема:

<ul>
 <li><span><img /><a></a></span><li>
 ...
<ul>

Почему если применять к img или a - margin или padding - смещаются оба элемента и img и a?

Картинку чего хотите.И напишите полностью код

Edited October 14, 2011 by cssview

[psywalker]

Добрый вечер. Подскажите пожалуйста, вот такая схема:

<ul>
 <li><span><img /><a></a></span><li>
 ...
<ul>

Почему если применять к img или a - margin или padding - смещаются оба элемента и img и a?

Ничего не понятно. Почему теги не закрыты? Что за картинка? Где атрибуты у ссылок? Где текст? Сделай нормальный пример, для начала.

[Arinden]

Вот, посмотрите пожалуйста.

[Nekromancer]

img строчный элемент. Так как margin фактически увеличивает размер элемента получается, что растягивается и строка. По умолчанию вертикальное выравнивание у строчных элементов - baseline. Задайте вертикальное выравнивание для них либо же для конкретного элемента - top и тогда всё у вас получится.

vertical-align: top;

[Arinden]

img строчный элемент. Так как margin фактически увеличивает размер элемента получается, что растягивается и строка. По умолчанию вертикальное выравнивание у строчных элементов - baseline. Задайте вертикальное выравнивание для них либо же для конкретного элемента - top и тогда всё у вас получится.

vertical-align: top;

Большое спасибо за подсказку, я смог сделать! Правда, ещё необходимо добавить line-height, без него элементы располагаются посередине строки, высота которой определяется автоматически, таким образом, я просто задал высоту строки, как высоту всего элемента. Ещё раз спасибо!

А если бы у нас текст ссылки был многострочным? Ведь тогда vertical-align уже невозможно применить, верно? В таком случае будет необходимо заключить ссылку в ещё один тег, да?

Edited October 14, 2011 by Arinden

[psywalker]

img строчный элемент. Так как margin фактически увеличивает размер элемента получается, что растягивается и строка. По умолчанию вертикальное выравнивание у строчных элементов - baseline. Задайте вертикальное выравнивание для них либо же для конкретного элемента - top и тогда всё у вас получится.

vertical-align: top;

Большое спасибо за подсказку, я смог сделать! Правда, ещё необходимо добавить line-height, без него элементы располагаются посередине строки, высота которой определяется автоматически, таким образом, я просто задал высоту строки, как высоту всего элемента. Ещё раз спасибо!

А если бы у нас текст ссылки был многострочным? Ведь тогда vertical-align уже невозможно применить, верно? В таком случае будет необходимо заключить ссылку в ещё один тег, да?

Да, верно. А лучше всё таки флоат.

[Arinden]

Да, верно. А лучше всё таки флоат.

Понял. Спасибо!