Question

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

上的示例

图像＆amp;我所指的边框位于主要内容区域的左上角，并在其旁边和下方包含白色文字。

这是我正在谈论的图片的网址：

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

我将虚线边框做得更厚更白，这样你就能看到我在说什么。我在图像上设置了上边距和右边距，因此文本不会对着图像。如何使边框与图像（而不是图像周围+设置的边距）对齐（坐下齐平）。如果可能的话，也不使用填充。我想保持我的利润。有办法解决这个问题吗？

非常感谢！

Answer 1

添加/编辑CSS：

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

Answer 2

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。

Answer 3

我看到这种风格适用：

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

取下衬垫为我修好了......

Answer 4

摆脱图像上的填充。将填充设置为0：

img#colorfx1 { padding: 0; }

Answer 5

从我看到你没有设置该图像的边距。你确实有填充设置。删除填充并使用边距后，它应该没问题。

Answer 6

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

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

Answer 7

您可以使用pandding，例如：

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

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

...问候

Answer 8

我有一个元回答：是的，填充是你的问题。如果你开始使用a）Chrome的“Inspect Element”上下文菜单命令，或者b）Firebug for Firefox，你可能会避免在将来提出这类问题，这或多或少是相同的。查看元素的计算样式，您可以确切地看到属性使其元素的行为方式。

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

8 个答案: