Ссылка вне тега div содержит пустое пространство

#html

#HTML

Вопрос:

У меня есть ссылка вне div, как в следующем примере:

 <a href="http://google.com">
    <div id="Something" style="width:200px; height:100px; display:block; background-color:red; padding:0; margin:0;">
    </div>
</a>

Теперь ссылка работает в любой части div, но она также присутствует за пределами div, в основном в правой части, где ничего нет. Как я могу это исправить, чтобы ссылка работала только внутри тега div?

Вот код в jsfiddle:http://jsfiddle.net/BWPHS /

1.Это недопустимый способ сделать это. Сделайте A тег display: block внутри DIV.

2. @JaredFarrish В зависимости от типа документа, я думаю, что обертывание <a> элементов на уровне блоков действительно допустимо .

3. @sdleihssirhc — Хорошо, HTML5 позволяет (не знал этого). Всевозможные вкусности!

Ответ №1:

Обратите внимание, DIV элементы display: block по умолчанию, так что вам это не нужно в DIV . Что вам нужно сделать, так это сделать A одинаковую высоту и изменить отступы и поля по вкусу.

 <div id="Something" style="width:200px; height:100px; background-color:red; padding:0; margin:0;">
    <a href="http://google.com" style="height: 100px; display:block; padding: 0; margin: 0;"></a>
</div>

http://jsfiddle.net/BWPHS/3/

Обратите внимание, как отмечает sdleihssirc, HTML5 допускает это (если вы используете DOCTYPE). Обратите внимание, чтобы решить конкретную проблему для HTML5, вам нужно будет применить высоту и ширину к A тегу:

 <a href="http://google.com" style="width: 200px; height: 100px; display:block; padding: 0; margin: 0; background: blue;">
    <div id="Something" style="height: 100px; background-color: red; padding:0; margin:0;"></div>
</a>

http://jsfiddle.net/BWPHS/2/

И, как указывает thirtydot, вы можете display: inline-block или float: left #something элемент и применить display: block к A , и он должен работать идеально для вас:

 #something,
#something a {
  padding: 0;
  margin: 0;
}
#something {
  display: inline-block;
  background: red;
}
#something a:link {
  display: block;
  width: 200px;
  height: 100px;
}

<div id="something">
    <a href="http://google.com"></a>
</div>

http://jsfiddle.net/BWPHS/6/

И вы, вероятно, хотите попытаться избежать использования встроенных style атрибутов.

1. Было бы лучше удалить width и height из div , чтобы избежать дублирования, и вместо этого использовать float: left или display: inline-block .

2. @thirtydot — Что-то вроде этого? jsfiddle.net/BWPHS/5 (Небольшой пробел внизу — небольшая проблема.)

3. Да, это оно. Вы можете избавиться от пробела внизу, добавив vertical-align: top к a (или просто используя display: block на a вместо display: inline-block ).

4. @thirtydot — Это, вероятно, больше похоже на то, о чем вы думали (и без пробелов): jsfiddle.net/BWPHS/6

5. Выглядит хорошо. Я бы дал вам преимущество, если бы я уже не дал вам преимущество.