Border-radius и padding не очень хороши

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

CSS :

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

HTML :

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

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 не имеет смысла, не имеет смысла. Виноват.

19
задан KyleMit 30 July 2014 в 22:00
поделиться