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

问题描述

| 快速提问。请参阅http://www.urbanelementz.ca/上的示例... 我所指的图像和边框位于主要内容区域的左上方，并在其旁边和下方带有白色文字换行。 这是我正在谈论的图片的网址： http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png 我将虚线边框变粗了，使您可以看到我在说什么。我在图片上设置了上边距和右边距，因此文字与图片不符。如何使边框恰好与图像对齐（坐齐），而不是围绕图像+设置的边距。尽可能不使用填充。我想保持利润。有没有办法来解决这个问题？ 非常感谢！     

解决方法

        使用以下方法添加/编辑CSS：

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

    ,        

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

。     ,        我看到这种风格适用：

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设置为0：

img#colorfx1 { padding: 0; }

    ,        从我看来，您没有为该图像设置边距。但是，您确实将填充设置为它。 一旦删除了填充并使用margin，就可以了。     ,        我想如果你这样设置css

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

    ,        您可以使用以下填充：

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

这将与您想要的一样，这里也有一些东西： 链接 问候...     ,        我有一个元答案：是的，填充是您的问题。如果您开始使用a）Chrome的\“ Inspect Element \”上下文菜单命令，或b）Firefox的Firebug，或多或少是相同的，您将来也许可以避免问这种问题。查看元素的计算样式，您可以确切地看到什么属性使元素的行为与行为相同。