边框半径和填充不好玩 [英] Border-radius and padding not playing nice

问题描述

我在尝试取得图片上的半径时遇到问题。

I'm having trouble trying to get a radius on images. I've simplified my problem and exaggerated the variables for demonstration purposes.

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>

如果我删除了填充，poof，漂亮的角落。
如果它有帮助，有一个原因，他们在两个不同的类。 wrap可以有多个pic。有时他们会是同一个类，其他时候他们不会这样排序：

If I remove the padding, poof, pretty corners. If it helps, there's a reason why they're in two different classes. "wrap" can have more than one "pic" in it. Sometimes they'll be of the same class, other times they wont, sort like this:

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

任何帮助或见解都会感激。

Any help or insight would be appreciated.

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

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

为解决方案进行了修改：

这或多或少是我基本上是想做的。我想我有一个'duh'的时刻。我确定现在我需要使用的声明是 margin 不是 填充。另一个Thanx到GGJ提醒我如何去正确的方式。和Jan说关于添加填充到一个'img'标记没有任何意义，它不。

This was more or less what I basically was trying to do. I think I was having a 'duh' moment. I'm sure now the declaration I needed to used was margin not padding. Another Thanx to GGJ for reminding me how to go about it the right way. And what Jan said about adding padding to an 'img' tag making no sense, It doesn't. My bad.

推荐答案

您的边框半径将在填充范围之外，请尝试设置边框，

Your border radius will be outside of the padding, try setting margins instead which will space outside of the border.

这篇关于边框半径和填充不好玩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！