Как избавиться от пробелов между <a hrefs> и <img>

Question

У меня есть несколько ссылок, в которых есть изображения для создания меню в верхнем левом углу страницы. После меню у меня есть изображение рядом с ним, которое расширяется до конца страницы. Однако это изображение сейчас находится ниже области меню.

Как мне избавиться от этого пробела?

.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

Решил, изменив мою позицию на абсолютную и установив top на 0px; Извините, что потратили впустую время, ребята, я просто не думал, что это сработает, хе.

Answer 2

Я обошел это так: назначил отображение тега: 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 вокруг вашего изображения дает вам лучшее время при создании адаптивных изображений, и вы хотите задать им границы (не мешая позиционированию), просто примените границу к контейнеру.

Answer 3

Не слушайте никого, кто говорит об удалении пробелов - это поможет, но только в течение некоторого времени, пока ваш контент не будет изменен кем-то, кто не знает уловки пробелов. :)

Когда вы назначаете float: left для элемента, он автоматически преобразуется в элемент уровня блока.

Поэтому, если вы хотите избавиться от проблемы, используя только CSS, используйте display: block для изображения.

Если вы используете текст с изображениями (это не тот случай, который указан здесь), используйте float: left или float: right.

Answer 4

Вы пробовали display: block, float: left для изображений и a?