Question

我不擅长CSS设计，但我只是在为网站制作内容显示布局。我基本上想通过将图像放在容器div中来制作细线。并设置所有维度属性如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style>
       #thinLineWrap{
            width: 510px; 
            height: 3px;
            background-color: #000000;
       }  
       #thinLineWrap img{
           width: 170px;
           height: 3px;
           background-color: #000000;
           margin-top: 0px;
           float:left
       }
    </style>
</head>
<body>
     <div id="thinLineWrap">
        <img src="images/thin_line.gif" border="0">
    </div>
</body>
</html>

但是在Chrome检查中查看输出时，输出结果似乎没有达到预期的指定大小，如下面的快照所示。

enter image description here

您可能还会注意到，我的图像宽度和高度分别变为171px和4px，与样式表部分中设置的不同。我可能犯过的任何错误？为什么图像元素变得比它应该大1个像素？任何建议都将非常感激。

修改这里是原始有问题的细线图像的副本。不确定图像本身是否有任何问题。

https://lh5.googleusercontent.com/-kDRsR493dZU/UMOXRBbty9I/AAAAAAAAAh8/g58GnqQZ3pk/s128/thin_line.gif

Answer 1

您在#thinlinewrap中定义了一个Img以获得属性。

div#thinLineWrap{
   border:0px;
}

#thinlineWrap img{
   height:3px;
}

可能是您正在寻找的代码。

Answer 2

我发现了它。你的img从另一种风格继承了它的边界，试着像这样覆盖它：

#thinLineWrap img{
           border:none;
           width: 170px;
           height: 3px;
           background-color: #000000;
           margin-top: 0px;
           float:left
       }

使用CSS获取图像宽度和高度似乎是错误的

2 个答案: