如何消除 之间的空格 和

Question

我有一堆 href，里面有图像，可以在页面的左上角创建一个菜单。 菜单之后，我旁边有一个图像，该图像扩展到页面末尾。 然而，该图像现在位于菜单区域下方。

我如何摆脱这个空白区域？

.MenuArea
{
        position:relative;
        width:225px;
        height:300px;
        background-color:#666666;
        text-align:center;
        display:inline-block;
        padding:0;
        margin:0;
}
.MenuAreaImageSmall
{
    position:relative;
    left:225px;
    height:300px;
    text-align:center;
    display:block;
    padding:0;
    margin:0;
}
.MenuLink
{
    position:relative;
    top:15px;
    width:225px;
    padding:0;
    display:inline-block;
    border:0 solid #ffffff;
}
.Href
{
    margin:0;
    padding:0;
}

                    $cpage = $page."ImgArea";
                    $query = "Select * FROM ContentTab WHERE InUse='Y' && PageAssignment='".$cpage."' && ContentType='Image' ORDER BY ContentOrder ASC";
                    $result = mysql_query($query);
                    $num = mysql_numrows($result);

                    $cpage1 = $page."Link";
                    $query = "Select * FROM ContentTab WHERE InUse='Y' && PageAssignment LIKE '".$cpage1."' && ContentType='Image' ORDER BY ContentOrder ASC";
                    $result1 = mysql_query($query);
                    $num1 = mysql_numrows($result1);

                    $n = 0;
                    $i = 0;
                    while($n < $num)
                    {
                        $image = mysql_result($result,$n,"Content");

                        if($cpage == "SolutionImgArea")
                        {
                            if($n == 0)
                            {
                                $output = "<div id=\"MenuAreaBox\" class=\"MenuArea\"/>\n";

                                while($i < $num1)
                                {
                                    $links = mysql_result($result1,$i,"PageAssignment");

                                    if($links == $cpage1)
                                    {
                                        $linkimg = mysql_result($result1,$i,"Content");
                                        $temp = $linkimg;
                                        list($linkimg2, $format) = split('[.]', $temp);
                                        $temp = $linkimg2;
                                        $linkimg2 .= "_roll.".$format;
                                        list($trash, $trash, $filename) = split('[/]', $temp);

                                        $output .= "<A href=\"test.php?page=Solution\" onmouseover=\"roll_over('".$filename."', '".$linkimg2."')\" onmouseout=\"roll_over('".$filename."', '".$linkimg."')\" class=\"Href\">";
                                        $output .= "<img name=\"".$filename."\" src=\"".$linkimg."\" alt=\"\" class=\"MenuLink\"/>";
                                        $output .= "</A>";
                                    }
                                    $i++;
                                }
                            }
                            if(($n+1) == $num)
                            {
                                //$output .= "                  </div>\n";
                                $output .= "<img src=\"".$image."\" class=\"MenuAreaImageSmall\" alt=\"\"/>";
                            }

                        }
                        else
                        {
                            $output = "<img src=\"".$image."\" class=\"MenuAreaImageBig\" alt=\"\"/>";
                        }
                        $n++;
                    }
                    echo $output;?>

Answer 1

链接到之前：
test1.php

链接到之后：
http://www.gramercyit.com/test.php

通过将我的位置更改为来解决它绝对并将顶部设置为 0px； 抱歉浪费了你们的时间，我只是没想到会这样，呵呵。

Answer 2

您是否尝试过使用 display:block, float:left 来显示 img 和 a ？

Answer 3

不要听任何人说要删除空格 - 它会有所帮助，但只能持续一段时间，直到您的内容被不知道空格技巧的其他人修改为止。 :)

当您将 float: left 分配给元素时，它会自动转换为块级元素。

因此，如果您想仅使用 CSS 来解决问题，请对图像使用 display:block。

如果您使用带有图像的文本（此处未指定这种情况），请使用 float: left 或 float:right。

Answer 4

我解决这个问题的方法是分配 a 标签 display:block

唯一的问题是你需要一个用于 a 和 img 的容器，

<div class="image"><a href="#"><img src="blah.gif" /></a></div>

.image a,
.image img
{
  padding: 0;
  margin: 0;
  display: block;
}

替代解决方案是（ 但这种做法确实很糟糕，所以我建议不要这样做）

.image a
{
  font-size: 0;
}

最终，在图像周围放置一个 div 可以让你在创建响应式图像时有更好的时间，并且你想给它们边框（没有它）拧紧你的定位），只需将边框应用到容器上即可。