边框半径和填充效果不好

Posted 2023-03-06

【中文标题】边框半径和填充效果不好

【英文标题】：Border-radius and padding not playing nice

【发布时间】：2012-03-13 15:45:31

【问题描述】：

我在尝试获取图像半径时遇到问题。为了演示，我简化了我的问题并夸大了变量。

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"
           />
</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/

为解决方案而编辑：

This 或多或少是我基本上想要做的。我想我有一个“呃”的时刻。我现在确定我需要使用的声明是 ma​​rgin not padding。再次感谢 GGJ 提醒我如何以正确的方式去做。 Jan 所说的向“img”标签添加填充是没有意义的，它没有。我的错。

【参考方案1】：

迟到但不知何故找到了解决方案。你不能用它做一个圆，但你可以通过在下面做一个小半径来利用它，这是我的解决方案的一个例子。

我的图片需要 10px 的内边距和 5px 的半径，加在一起 ​​border-radius:15px 对我来说效果很好

我希望解释好一点。

【参考方案2】：

span 而不是img 也有同样的问题。不完全相同的场景，因为两个标签有不同的display 值（参见this SO thread）。

在我的例子中，将 display:inline-block 设置为 span 可以解决所有问题。

【参考方案3】：

这是在某些浏览器（主要是 IE 和 safari）中对同一元素应用填充和边框半径的副产品。 border-radius 改变了盒子模型的边框组件的曲率，它围绕着 padding 组件。

除了其他答案之外，另一个似乎可以解决问题的有趣事情是添加边界线。如果不想看到边框，可以使用border: 1px solid transparent，像这样：

.invisible-border 
    border: 1px solid transparent;

Demo in jsFiddle

【参考方案4】：

您的边框半径将在填充之外，请尝试设置边距，而不是在边框之外留出空间。

【参考方案5】：

将填充设置在“包装”而不是图像上（在图像上设置填充没有多大意义:)），这应该可以解决您的问题。

【讨论】：

Sorta 会起作用，但是“wrap”元素不仅仅围绕“pic”元素，也许我的措辞很有趣。无论如何，对图片进行实际环绕似乎可行，但在我的情况下不太实用。不过谢谢。