Границы радиуса и отступы не играют хорошо

Question

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

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>

Если я уберу отступы, пуф, красивые углы. Если это помогает, есть причина, почему они в двух разных классах. В «обертке» может быть более одной «картинки». Иногда они принадлежат к одному и тому же классу, а иногда нет, вроде как:

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 , а не padding . Еще раз спасибо GGJ за напоминание о том, как это сделать правильно. И то, что Ян сказал о добавлении отступа к тегу 'img', не имеет смысла. Это не так. Мой плохой.

Answer 1

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

Answer 2

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

Answer 3

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

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

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

Демонстрация в jsFiddle

Answer 4

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

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