【问题标题】: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,这或多或少是一回事,您将来可能会避免问此类问题。查看元素的计算样式,您可以确切地看到是什么属性使您的元素表现得如此。

            【讨论】:

            • 是的,我有萤火虫,但这是漫长的一天,我只是没想到。不过还是谢谢。
            猜你喜欢
            • 2016-06-25
            • 2011-06-08
            • 2011-08-22
            • 1970-01-01
            • 2023-03-07
            • 1970-01-01
            • 2020-11-08
            • 1970-01-01
            • 2014-01-14
            相关资源
            最近更新 更多