#html #css #padding #margin
#HTML #css #заполнение #поле
Вопрос:
У меня простой вопрос, где мои материалы в моем div не имеют полей. В частности, когда задано значение margin, padding и border равным 0, между элементами все еще остаются пробелы
Код:
<div id="menu" >
<a href="#" style="margin:0;border:0;padding:0;background:red">sup</a>
<a href="#" style="margin:0;border:0;padding:0;background:red">sup</a>
</div>
Просто добавив эти коды в пустой текстовый файл и сохранив как html, между элементами остаются пробелы, если я специально не установил отрицательное поле. Это сработало бы, но я просто хочу знать, почему это не 0, когда для него специально установлено значение 0.
Заранее спасибо: D
Новое открытие :
Я пытался превратить вышеприведенное в display:block для отображения одного поверх другого, когда я узнал, что
при добавлении этого:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Это не сработало
Я должен был использовать этот doctype, но сейчас он не работает.
Какие-либо решения?
Код выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<div id="kingmenu" style="position:absolute;top:90px;left:290px;width:55px;">
<a href="#"><img src="http://white-attic.com/themes/prestashop/img/kingtop.png"></a><a href="#"><img src="http://white-attic.com/themes/prestashop/img/kingbottom.png"></a>
</div>
проблема в том, как показано на этом скриншоте:
http://img828.imageshack.us/img828/8331/whitespace.jpg
Ответ №1:
Пробел находится в вашей разметке.
Даже если вы установите a для элементов значение inline-block (которым они не являются по умолчанию), вы все равно увидите (нормализованное) пространство, которое есть в вашем HTML.
Чтобы устранить это, вам нужно «соединить» элементы друг с другом.
ОБНОВЛЕНИЕ: теперь ваш файл должен выглядеть следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<div id="menu" ><a href="#" style="margin:0;border:0;padding:0;background:red">sup</a><a href="#" style="margin:0;border:0;padding:0;background:red">sup</a></div>
Я проверил в Chrome, Firefox 6 и IE 8, что между ссылками нет пробела.
Комментарии:
1. итак, есть ли какой-либо способ устранить пробелы, кроме установки отрицательного поля?
2. Устраните его в исходном коде: запускайте
<a>теги один сразу за другим.3. @robobooga, в каком браузере? Предположительно, это означает, что вы переключились из режима quirks, но я не обнаружил
DOCTYPEникакого эффекта. См. Редактирование.4. он работает горизонтально, однако, если я хочу сделать это вертикально, похоже, это не работает
5. Вероятно, то, что вы видите, является результатом
line-height. имейте в виду, что это встроенные элементы. Я воспроизвел внешний вид (я думаю), который вы получаете, и это правило должно это исправить:a { display: inline-block; height: 100%; }(Очевидно, измените селектор по мере необходимости.) Это дает дополнительное преимущество, позволяя переносить, когда серия шире, чем ее контейнер.a
Ответ №2:
Это потому, что в основном вы просто добавляете пробел. Div является блочным элементом и a встроенным элементом, поэтому в основном оба встроенных элемента разнесены.
Помните, что браузер интерпретирует пробелы.
Ответ №3:
Это потому, что новая строка в HTML интерпретируется как пробел при ее визуализации.
Попробуйте это:
<div id="menu" >
<a href="#" style="background:red">sup</a><a href="#" style="background:red">sup</a>
</div>
Комментарии:
1. Привет, но путем добавления doctype, как сказано в моем вопросе. ваш метод не работает. но если я удалю doctype, он будет работать отлично. Есть ли какое-либо обходное решение?