Пограничный радиус и прокладка не играют хорошо

У меня возникают проблемы с получением радиуса на изображениях. Я упростил свою проблему и преувеличил переменные для демонстрационных целей.

CSS

div.wrap img {
    -moz-border-radius: 50px;
         border-radius: 50px;
}
img.pic {
    padding: 15px 25px 35px 45px;
}

HTML:

<div class="wrap">
    <img class="pic" src="http://i.imgur.com/UAef0.jpg"
         width="300" height="300" />
</div>

Если я удалю прокладку, пуф, красивые углы. Если это помогает, есть причина, почему они находятся в двух разных классах. "wrap" может иметь более одного "pic" в нем. Иногда они будут одного класса, в других случаях они бывают такими:

img.left_pic  { float:left;  padding:5px 10px 5px 5px; }
img.right_pic { float:right; padding:5px 5px 5px 10px; }

Любая помощь или понимание будут оценены.

jsFiddle: http://jsfiddle.net/NwfW6/

Отредактировано для решения:

Это было более или менее то, что я в основном пытался сделать. Я думаю, что у меня был момент "духа" . Теперь я уверен, что объявление, которое мне нужно было использовать, было margin не дополнением. Еще один Thanx для GGJ, чтобы напомнить мне, как правильно это сделать. И что Ян сказал о добавлении дополнения к тегу "img" , не имеющему смысла, это не так. Мой плохой.

Ответы

Ответ 1

Ваш радиус границы будет за пределами прокладки, попробуйте вместо этого установить поля, которые будут располагаться вне границы.

Ответ 2

Установите дополнение на "обертку" не на изображение (настройка прокладок на изображениях не имеет особого смысла:)), что должно устранить вашу проблему.

Ответ 3

Это побочный результат применения как дополнения, так и радиуса границы к одному и тому же элементу в некоторых браузерах (в основном IE и сафари). Радиус-граница изменяет кривизну пограничного компонента модели коробки, которая окружает компонент дополнений.

В дополнение к другим ответам, еще одна интересная вещь, которая, кажется, устраняет проблему, - это добавление границы. Если вы не хотите видеть границу, вы можете использовать border: 1px solid transparent, например:

.invisible-border {
    border: 1px solid transparent;
}

Демо в jsFiddle

Ответ 4

Была такая же проблема с span вместо img. Не совсем один и тот же сценарий, поскольку оба тега имеют разные display значения (см. Эту ветку SO).

В моем случае установка display:inline-block на span исправила все.