CSS 边框问题 - 我在图像周围有边框。我还在图像上使用边距。边框不适合图像？答案

【问题标题】：CSS-Border Problem - I have a border around an image. I also use margins on the image. Border doesn't fit tight against image?CSS 边框问题 - 我在图像周围有边框。我还在图像上使用边距。边框不适合图像？
【发布时间】：2011-09-19 22:01:54
【问题描述】：

快速提问。请参阅http://www.urbanelementz.ca/ 的示例...

我所指的图像和边框位于主要内容区域的左上角，其旁边和下方都有白色文字环绕。

这是我正在谈论的图像的 URL：

http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png

我把虚线边框加粗变白，这样你就能明白我在说什么了。我在图像上设置了上边距和右边距，因此文本不会与图像正对。如何使边框与图像直接对齐（与图像齐平），而不是围绕图像+设置的边距。尽可能不使用填充。我想保持我的边距。有没有办法解决这个问题？

非常感谢！

【问题讨论】：

标签： image xhtml css border

【解决方案1】：

我看到应用了这种样式：

img#colorfx1 {
    border-collapse: collapse;
    border-color: #FFFFFF;
    border-style: dotted;
    border-width: 3px;
    float: left;
    padding: 2px 5px 0 1px;
    vertical-align: top;
}

删除填充为我修复了它...

【讨论】：

【解决方案2】：

使用以下命令添加/编辑 CSS：

img#colorfx1 {
  padding: 0px;
  margin-right: 10px;
}

【讨论】：

它在 style.css 的第 147 行。
我把我的css改成这样：img#colorfx1 { margin: 0px 5px 0px 1px;垂直对齐：顶部；向左飘浮;边框颜色：#FFF；边框样式：虚线；边框宽度：1px； }

【解决方案3】：

去掉图像上的填充。将填充设置为 0：

img#colorfx1 { padding: 0; }

【讨论】：

很棒的评论 - 因为它不像我点击添加帖子后出现的答案。

【解决方案4】：

据我所知，您没有为该图像设置边距。不过，您确实设置了填充。一旦您删除填充并使用边距，它应该没问题。

【讨论】：

【解决方案5】：

我想如果你这样设置你的CSS

img#colorfx1 {
  padding: 0px;
  margin: 0px 5px 0px 5px;
  border: #FFFFFF dotted 3px;
  float: left;
}

【讨论】：

【解决方案6】：

img#colorfx1 {
    border-collapse: collapse;
    border-color: #FFFFFF;
    border-style: dotted;
    border-width: 3px;
    float: left;
    padding: 2px 5px 0 1px;
    vertical-align: top;
}

把padding改成margin，看起来不错。

我想你一开始打算写margin。

【讨论】：

完美。感谢大家的帮助。这是漫长的一天，需要其他设计师/编码人员提供新的输入。再次感谢！
我把我的css改成这样：img#colorfx1 { margin: 0px 5px 0px 1px;垂直对齐：顶部；向左飘浮;边框颜色：#FFF；边框样式：虚线；边框宽度：1px； }

【解决方案7】：

你可以使用pandding，例如：

<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">

这看起来和你想要的一样，这里还有一些东西： link

问候...

【讨论】：

【解决方案8】：

我有一个元答案：是的，填充是你的问题。如果您开始使用 a) Chrome 的“Inspect Element”上下文菜单命令，或 b) Firefox 的 Firebug，这或多或少是一回事，您将来可能会避免问此类问题。查看元素的计算样式，您可以确切地看到是什么属性使您的元素表现得如此。

【讨论】：

是的，我有萤火虫，但这是漫长的一天，我只是没想到。不过还是谢谢。